Closed Funncy closed 1 year ago
And in Safari, it takes three calls to domToCanvas to upload the image correctly
First
Second
Thrid
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
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?
Oh and by the way, the font is fixed, thanks.
then
canvas.toDataURL('image/png', 1)
canvas should only export png like this
The canvas default dpi is 96 which is probably your problem
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.
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.
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
Thank you, strangely it looks degraded in the iPhone gallery but when I put it on Instagram it looks fine. thank you!!!
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![download (35)](https://user-images.githubusercontent.com/22514912/233540384-9cb266af-9597-4252-bacf-3fbad7a1c355.png)
In Safari![download-4](https://user-images.githubusercontent.com/22514912/233540400-c32a6866-5da9-4134-b14b-534a3589cbde.png)
my code :
`
Your Environment