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

Question

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.

Answer 1

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

Answer 2

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.

1. I should have mentioned before as the created images are fed to vis.js .
2. When I experimented more, I saw vis.js does not append the created objects, but it changes the innerHTML of the timeline. (vis.js might not support blob images as src of img tag)
3. Then, I decided to give a shot to append element. To do that, I created a new div element, and appended the created images to that div.
4. I also added an additional promise level to the blob image creation process, since some files were missing.

Code snippet from newly added promise level:

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:

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.

Answer 3

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