html-to-image
html-to-image copied to clipboard
PNG image rendering as blank on IOS 13 view option
Expected Behavior
On IOS 13 iPhone devices, when clicked on download the download manager displays "view" or "Download" options, when chosen view option the PNG image preview to open.
User should see the preview of image.
Current Behavior
On IOS 13 iPhone devices, when clicked on download the download manager displays "view" or "Download" options, when chosen view option the screen is bank.
The screen is blank
Possible Solution
For those who are dealing with this issue try this code, it works for me, the issue #66 is related to this topic exactly, since it is closed then I just want to provide the solution with this one. hope this will be usefull.
const handleClickDownload = () => {
toBlob(elementt)
.then(function (blob) {
const link = document.createElement('a');
const url = window.URL.createObjectURL(blob as Blob);
link.href = url;
link.download = `someIntrestingName.png`;
link.click();
});
};
👋 @Ramin-Khodaie
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.
For Those who are dealing with this issue, I found the solution by calling the toBlob function two times like this:
const handleClickDownload = async () => {
if (element) {
const blob = await Promise.all([
toBlob(element, { pixelRatio: 4 }),
toBlob(element, { pixelRatio: 4 })
]).then((res) => res[1] as Blob);
const url = window.URL.createObjectURL(blob);
const link = document.createElement('a');
link.href = url;
link.download = `someIntrestingName.png`;
link.click();
}
};
by this code I could view the created image by pressing view
button and download it by download
button in iphone devices.