Blob images does not show up at UI, although I can see them on console-CodePudding

I am trying to create multiple blob images, and show them for a video timeline 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. The problem is blob images does not show up at UI, although I can see them on console. Any ideas?

Code snippet from creation of blob images:

// 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:

actual html img elements:

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.

CodePudding user response：

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:

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

CodePudding user response：

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