Fonts are not applied in Safari. about modern-screenshot

[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]

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

First

Second

Thrid

[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!!!