html-to-image icon indicating copy to clipboard operation
html-to-image copied to clipboard

PNG image rendering as blank on IOS 13 view option

Open Ramin-Khodaie opened this issue 1 year ago • 1 comments

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 avatar Jan 24 '24 13:01 Ramin-Khodaie

👋 @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.

biiibooo[bot] avatar Jan 24 '24 13:01 biiibooo[bot]

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.

Ramin-Khodaie avatar Mar 09 '24 15:03 Ramin-Khodaie