Fonts are not applied in Safari.

[Funncy]

I am currently using this library to develop a requirement to store a specific component. Thanks for developing it.

It is working fine in chrome. However, in safari, the font is not being applied and is coming up with the default font.

In Chrome

In Safari

my code :

 await domToCanvas(imageDiv, {
      scale: 2,
      backgroundColor: 'white',
      drawImageInterval: 1000,
    });

    const canvas = await domToCanvas(imageDiv, {
      scale: 2,
      backgroundColor: 'white',
      drawImageInterval: 1000,
    });

`

<div id="capture-area" className="relative z-[-2] w-[340px] h-[370px] " ref={imageShareRef}

[Funncy]

And in Safari, it takes three calls to domToCanvas to upload the image correctly

First

Second

Thrid

[qq15725]

Are there still problems with svg+xml inline image decoding in Safari? The simple example I tested seems to be normal

modern-screenshot: 4.4.15

https://codepen.io/qq15725/pen/PoBbOWm

You need to see how the font is imported. Is there a warning of CORS

[Funncy]

Thanks for the quick reply. The issue of calling and saving the image multiple times is not a pressing issue for me at the moment - the library is fast enough for me to call it 3 times. (I'll try to reproduce the symptoms with codepen or something later).

The more pressing issue for me is I'm currently developing a webapp made with Nextjs and wrapped in Flutter. I'm using native webviews. On the iPhone mobile webview, when I apply scale, it doesn't work and I get a degraded quality. Same thing when I give quality to 1. I have to save it in high quality now. Could you please give me some whiteness in this regard?

[Funncy]

Oh and by the way, the font is fixed, thanks.

[qq15725]

then

canvas.toDataURL('image/png', 1)

canvas should only export png like this

[qq15725]

The canvas default dpi is 96 which is probably your problem

[Funncy]

const canvas = await domToCanvas(node, {
      scale: 3,
      backgroundColor: 'white',
      drawImageInterval: 1000,
      quality: 1,
    });

    if (checkWebApp()) {
      const result = await saveImageToGallery(canvas.toDataURL('image/png', 1));
      if (result === undefined) {
        setToast({
          content: '오류가 발생했습니다.',
        });
        return;
      }

      setToast({
        content: '저장되었습니다.',
      });
      return;
    } else {
      FileSaver(canvas.toDataURL('image/png', 1));
    }

Above is my code.

scale doesn't work on mobile webview It works fine in desktop safari.

[Funncy]

As I continue to test, the issue with degradation seems to be more about quality than scale.

It only happens on the iPhone mobile webview.

[qq15725]

You can also try domToPng, I will handle png dpi value based on scale

origin width: 1280 origin height: 105.5 scale: 4

output width: 5120 output height: 422 dpi: 384

[Funncy]

Thank you, strangely it looks degraded in the iPhone gallery but when I put it on Instagram it looks fine. thank you!!!