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