[英]Blob images does not show up at UI, although I can see them on console
I am trying to create multiple blob images, and show them for a video timeline UI.我正在尝试创建多个 blob 图像,并将它们显示为视频时间线 UI。 To create the images, I take screenshots of the video for some certain time frames, and create img elements, then add img.src as blob images' url.
为了创建图像,我截取了某些时间帧的视频截图,并创建了 img 元素,然后将 img.src 添加为 blob 图像的 url。 The problem is blob images does not show up at UI, although I can see them on console .
问题是blob 图像没有显示在 UI 中,尽管我可以在 console 上看到它们。 Any ideas?
有任何想法吗?
Code snippet from creation of blob images:来自创建 blob 图像的代码片段:
// draw the video frame to canvas
const ctx = canvas.getContext("2d");
ctx.drawImage(videoPlayer, 0, 0, canvas.width, canvas.height);
ctx.canvas.toBlob(
blob => {
resolve(blob);
},
"image/jpeg",
0.75 /* quality */
);
Code Snippet from creation of images:来自创建图像的代码片段:
let img = '';
for (let i = 0; i < count / 3; i++) {
const cover = await GetVideoCover(item.video_url, i);
var url = URL.createObjectURL(cover);
var image = new Image();
image.src = url;
img += "<img src='"+image.src+"'>";
console.log(img)
}
return img;
The console log from console.log(img)
line:来自
console.log(img)
行的控制台日志:
actual html img elements:实际 html img 元素:
When I manually update the source as below, it works, but I did not understand why it does not get the source by itself.当我如下手动更新源时,它可以工作,但我不明白为什么它不能自己获取源。 Any idea would be appreciated.
任何想法将不胜感激。
Try registering an onload
event listener on the image
element and then handle all code that depends on that image in the event listener, like so:尝试在
image
元素上注册一个onload
事件侦听器,然后在事件侦听器中处理依赖于该图像的所有代码,如下所示:
for (let i = 0; i < count / 3; i++) {
const cover = await GetVideoCover(item.video_url, i);
var url = URL.createObjectURL(cover);
var image = new Image();
image.src = url;
image.addEventListener('load', (event) => {
// perform some magic here e.g append to DOM or draw the image to canvas
}
}
Thank you for the contributions, the answers did not work but they helped me in the process.感谢您的贡献,答案没有用,但他们在此过程中帮助了我。 I solved the problem today and wanted to share it here.
我今天解决了这个问题,并想在这里分享。
vis.js
.vis.js
。 Code snippet from newly added promise level:新添加的 promise 级别的代码片段:
const blobToImage = (itemVideoURL,captureSecond) => {
return new Promise(async (resolve,reject)=> {
let cover = await GetVideoCover(itemVideoURL,captureSecond);
const url = URL.createObjectURL(cover)
let img = new Image()
img.onload = () => {
URL.revokeObjectURL(url)
resolve(img)
}
img.src = url
img.height = '75'
})
}
Code snippet from new function:来自新 function 的代码片段:
let divElement = document.createElement('div');
for (let i = 0; i < count * 3; i++) {
let newImage = await blobToImage(item.video_url,i+1)
divElement.appendChild(newImage)
}
return divElement;
It magically worked.它神奇地起作用了。
You should use a single image rather than multiple images.您应该使用单个图像而不是多个图像。
Just concatanate all images together:只需将所有图像连接在一起:
let imgEle1 = document.querySelectorAll(".image")[0];
let imgEle2 = document.querySelectorAll(".image")[1];
let resEle = document.querySelector(".result");
var context = resEle.getContext("2d");
let BtnEle = document.querySelector(".Btn");
BtnEle.addEventListener("click", () => {
resEle.width = imgEle1.width;
resEle.height = imgEle1.height;
context.globalAlpha = 1.0;
context.drawImage(imgEle1, 0, 0);
context.globalAlpha = 0.5;
context.drawImage(imgEle2, 0, 0);
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.