Blank Image in Safari

[Himanshu Patil]

We are basically trying to take screenshots of a div which has images as it's child the output we are getting has blank spaces instead of images this works fine on chrome but safari has this issue

[vivcat]

👋 @himanshupatil363

Thanks for opening your first issue here! If you're reporting a 🐞 bug, please make sure you include steps to reproduce it.
To help make it easier for us to investigate your issue, please follow the contributing guidelines.

We get a lot of issues on this repo, so please be patient and we will get back to you as soon as we can.

[JokeShaco]

I also encountered this problem

[iFrong]

It seems to be a Safari bug that doesn't load the canvas immediately when the web page is rendered.
I tried to fork the code and fix it by setting a timeout when loading an image in util.ts within the createImage function.
from
img.onload = () => resolve(img)
to

 img.onload = () => {
      setTimeout(function () {
        resolve(img);
      }, 300);
    };

[jaja]

img.onload = () => {
setTimeout(function () {
resolve(img);
}, 300);
};

this works in mac safari but doesnt work in ios safari tho after 2-3 times the img does show

[iFrong]

img.onload = () => {
setTimeout(function () {
resolve(img);
}, 300);
};

this works in mac safari but doesnt work in ios safari tho after 2-3 times the img does show

Another way you can try is to loop the toCanvas function, but it's not the best practice because you don't know how many times to show the image.

export async function convertHtmlToCanvas(
  targetElement: HTMLElement,
  countReRender: number = 0,
): Promise<HTMLCanvasElement> {
  let canvas: any;
    for (let i = 0; i < countReRender; i++) {
      canvas = await toCanvas(targetElement);
    }
  return canvas;
}

[Rabithua]

In the same situation, the problems encountered in Safari are a headache，

[Juan Sebastian Lara Aros]

¿Has anyone found a better solution than the loop solution?

[DMTaswebdevelopment]

Here's how I fixed mine in Safari. I added delay using modern-screenshot: https://github.com/qq15725/modern-screenshot/tree/main

Which also came from html-to-image.

``
if (!isSafari) {
dataURL = await htmlToImage.toPng(imageElement);
} else {
//put a timer on the domToCanvas for 500ms to make sure the image is loaded
dataURL = await domToCanvas(imageElement, {
delay: 500,
debug: true,
}).then((canvas) => {
dataURL = canvas.toDataURL("image/png");
return dataURL;
});
}