On iOS, the downloaded and shared image is blank.

[aidanikuz02]

Hi. I'm using the latest version. We're implementing this on a project that uses AI to generate an image based on user selected prompt. The generated image is then assigned to element. The whole thing that we are trying to convert into an image is :

{username]

on top of

Works great on Android but the problem as usual lies with iOS. We realized a little late into it that when downloading or sharing the image the elements are blank except the

. for example, this is the download button function. Perhaps i am not implementing it correctly.

await (document as any).fonts.ready;
const dataUrl = await htmlToImage.toPng(elementRef.current, {cacheBust: true,});
const link = document.createElement("a");
link.href = dataUrl;
link.download = "capture.png";
link.click();

[biiibooo]

👋 @aidanikuz02

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.

[kenfouo]

Hello,
I have the same problem. In my case, this problem occurs when the HTML element uses an imported font-family (e.g., TikTokSans). But if I use a font-family that's built into the browser, like Arial, it works perfectly.