bubkoo / html-to-image

✂️ Generates an image from a DOM node using HTML5 canvas and SVG.
MIT License
5.39k stars 503 forks source link

PNG image rendering as blank on IOS 13 view option #452

Closed Ramin-Khodaie closed 3 months ago

Ramin-Khodaie commented 5 months ago

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();
      });
  };
vivcat[bot] commented 5 months ago

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

Ramin-Khodaie commented 3 months ago

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.