Blank Image in Safari

[himanshupatil363]

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

[biiibooo]

👋 @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

[frong123nk]

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

[jagabs]

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

[frong123nk]

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，

[Sebas3245]

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

[nyeoni]

@DMTaswebdevelopment There is no delay option.

[RonaldR]

I used patch-package to patch [email protected] for the project I'm working on.

Here is the diff that solved my problem:

diff --git a/node_modules/html-to-image/es/index.js b/node_modules/html-to-image/es/index.js
index 0eda938..768f239 100644
--- a/node_modules/html-to-image/es/index.js
+++ b/node_modules/html-to-image/es/index.js
@@ -16,6 +16,10 @@ export async function toCanvas(node, options = {}) {
     const { width, height } = getImageSize(node, options);
     const svg = await toSvg(node, options);
     const img = await createImage(svg);
+    const isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
+    if (isSafari) {
+        await new Promise(resolve => setTimeout(resolve, 1000));
+    }
     const canvas = document.createElement('canvas');
     const context = canvas.getContext('2d');
     const ratio = options.pixelRatio || getPixelRatio();