Blob 图像不会显示在 UI 中，尽管我可以在控制台上看到它们

Question

我正在尝试创建多个 blob 图像，并将它们显示为视频时间线 UI。 为了创建图像，我截取了某些时间帧的视频截图，并创建了 img 元素，然后将 img.src 添加为 blob 图像的 url。 问题是blob 图像没有显示在 UI 中，尽管我可以在 console 上看到它们。 有任何想法吗？

来自创建 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 */
);

来自创建图像的代码片段：

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;

来自console.log(img)行的控制台日志：

实际 html img 元素：

当我如下手动更新源时，它可以工作，但我不明白为什么它不能自己获取源。 任何想法将不胜感激。

Answer 1

尝试在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
    }
}

Answer 2

感谢您的贡献，答案没有用，但他们在此过程中帮助了我。 我今天解决了这个问题，并想在这里分享。

1. 我之前应该提到过，因为创建的图像被馈送到vis.js 。
2. 当我进行更多实验时，我看到 vis.js 并没有 append 创建的对象，但它改变了时间轴的 innerHTML。 （vis.js 可能不支持 blob 图像作为 img 标签的 src）
3. 然后，我决定试一试 append 元素。 为此，我创建了一个新的 div 元素，并将创建的图像附加到该 div。
4. 我还在 blob 映像创建过程中添加了一个额外的 promise 级别，因为缺少一些文件。

新添加的 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'
    })
}

来自新 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;

它神奇地起作用了。

Answer 3

您应该使用单个图像而不是多个图像。

只需将所有图像连接在一起：

   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);
   });