Image is displayed in browser, but doesn't come through with download (Safari) #348

Yehuda-Edelstein · 2022-12-16T00:38:09Z

Expected Behavior

I'm trying to download html including an img tag using safari, but the source doesn't show up, just an empty div.

Current Behavior

I have a preview box:

function Preview() {
          const mobileRef = useRef(null);
          const download = () => {
            setIsLoading(true);
            toPng(mobileRef.current, {})
              .then((dataUrl) => {
                const link = document.createElement("a");
                link.download = "youtube.png";
                link.href = dataUrl;
                link.click();
                setIsLoading(false);
              })
              .catch((err) => {
                console.log(err);
              });
          };
        
        return (
                <div>
                  <div ref={mobileRef}>
                    <img src={img} alt="" />
                  </div>
                  <button onClick={download}>DOWNLOAD</button>
                </div>
        )
}

When I download the image I get all the html besides the picture; instead just an empty div. where the image should be. All other parts of the html convert and download as a PNG, so I'm confused as to why the only issue is converting the img, especially when the img is being displayed in the browser. I'm wondering if this is a react issue, or just an issue with downloading images of an img.

Possible Solution

I'm not sure what's causing this, maybe it's an issue with my set up or css, but it doesn't really make sense to me. Someone mentioned in the comments that it may be an issue with CORS; I checked the network tab on safari when I hit download and there are a few things that come up:

The bottom is the png file (my static file) that is displayed in the browser but not when I download the html. Here it is displayed as a png, headers read 200, status okay.

Next up is an svg of the entire downloaded html. Inside the network tab, the svg file shows everything even the static png that doesn't show up in the downloaded html-to-image. Headers also read 200.

Next is an xhr, looks the same as the first png. Also 200.

The top 3 are all 304 not modified.

I'm pretty new to coding so all of this doesn't really make a lot of sense to me.

Steps To Reproduce

Best way to reproduce this is to just use the code example I gave and replace the src with any photo you have locally or online. I tried downloading with local photos and with google photos/gifs online and both ways come back with an empty div. I think it's important to state again that the images are displaying in the safari browser, they just don't get converted from html to PNG.

Your Environment

Since this is only happening to me in safari, I can't help but think it's not an issue with my code. Of course it could be -- I am setting my img with a react setState and having the src={require('')} but again, since the img displays in the browser, I can't help but think it's just a bug. Would love to help more, just not really sure what's causing the issue.

html-to-image: 1.11.2
OS: macOS Monteray 12.6
Browser: chrome (108.0.5359.98) but also safari.

The text was updated successfully, but these errors were encountered:

biiibooo · 2022-12-16T00:38:29Z

👋 @Yehuda-Edelstein

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.

pabloiea1995 · 2022-12-17T18:50:48Z

Hello Yehuda!
We faced the same issue, and it turned out to be a cors error with our image server. checkout the network Tab to see if that's the case. If it is, we solved it through the server configuration.

Hope it helps!

Yehuda-Edelstein · 2022-12-18T00:07:41Z

how do i test that out tho, if the error only happens through safari, or other mobile os? Is there a way to just add a fix assuming the issue is with cors?

Yehuda-Edelstein · 2022-12-18T00:14:16Z

WebSocket network error: The operation couldn’t be completed. (OSStatus error -9847.) I get this error in network/messages when I run the code over browserstack to recreate apple os

Yehuda-Edelstein · 2022-12-18T00:15:47Z

Hello Yehuda! We faced the same issue, and it turned out to be a cors error with our image server. checkout the network Tab to see if that's the case. If it is, we solved it through the server configuration.

Hope it helps!

Also what do you mean through server configuration exactly.

pabloiea1995 · 2022-12-18T07:25:49Z

I am not sure what that error means exactly as I tested it in Chrome browser and it shows a CORS error. Maybe you should checkout if that error is related to CORS.
When I talk about server configuration I mean proxy headers.
We realized it was our server problem because internet images (for example from google images) loaded correctly. You could do the same test to discard this problem

labaran1 · 2022-12-19T14:49:16Z

Facing the same issue here. I'm getting a cors error. @pabloiea1995 I currently don't get your fix.

Yehuda-Edelstein · 2022-12-19T15:05:20Z

You get the error on mobile only or also on desktop?

…

On Mon, Dec 19, 2022 at 9:49 AM labaran1 ***@***.***> wrote: Facing the same issue here. I'm getting a cors error. @pabloiea1995 <https://github.com/pabloiea1995> I currently don't get your fix. — Reply to this email directly, view it on GitHub <#348 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AWAMRKY56IBS2DPQBIJTM5DWOBYXPANCNFSM6AAAAAATAKQYQM> . You are receiving this because you were mentioned.Message ID: ***@***.***>

labaran1 · 2022-12-19T15:15:20Z

Desktop. Using Ubuntu 22.04.1 LTS chrome.
Mobile Safari
@pabloiea1995

Yehuda-Edelstein · 2022-12-19T16:42:08Z

how did you see what type of errors it was on mobile safari? Like I can't figure out how to inspect or see errors with mobile safari

labaran1 · 2022-12-19T16:50:27Z

Okay, my bad. I mean the issue is also on safari mobile. but, if you have a mac, you can use the web inspector. Go to settings on your phone, then safari, then toggle Web Inspector.

how did you see what type of errors it was on mobile safari? Like I can't figure out how to inspect or see errors with mobile safari

Yehuda-Edelstein · 2022-12-19T17:28:43Z

So I think the issue is with safari, not just on mobile. Just use safari on my mac and it downloads all the html besides the image, however the image is previewed in the browser. I checked and there are no errors. The network tab shows a 200, what's even weirder is that when I look at the data when I download the html as png, in the preview tab it shows the image I upload, but doesn't come through when I download the html.

labaran1 · 2022-12-19T17:41:25Z

So I think the issue is with safari, not just on mobile. Just use safari on my mac and it downloads all the html besides the image, however the image is previewed in the browser. I checked and there are no errors. The network tab shows a 200, what's even weirder is that when I look at the data when I download the html as png, in the preview tab it shows the image I upload, but doesn't come through when I download the html.

before the cors error, I experienced this same issue with chrome.

Yehuda-Edelstein · 2022-12-19T18:08:55Z

Have you seen the same error using safari? Also what was ur fix?

…

On Mon, Dec 19, 2022 at 12:41 PM labaran1 ***@***.***> wrote: So I think the issue is with safari, not just on mobile. Just use safari on my mac and it downloads all the html besides the image, however the image is previewed in the browser. I checked and there are no errors. The network tab shows a 200, what's even weirder is that when I look at the data when I download the html as png, in the preview tab it shows the image I upload, but doesn't come through when I download the html. before the cors error, I experienced this same issue with chrome. — Reply to this email directly, view it on GitHub <#348 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AWAMRK2OTO24IJPAJEKPL6TWOCM5BANCNFSM6AAAAAATAKQYQM> . You are receiving this because you were mentioned.Message ID: ***@***.***>

labaran1 · 2022-12-19T20:10:30Z

I've not fixed it yet. It's a ticket I'm working on.

Have you seen the same error using safari? Also what was ur fix?
…
On Mon, Dec 19, 2022 at 12:41 PM labaran1 @.> wrote: So I think the issue is with safari, not just on mobile. Just use safari on my mac and it downloads all the html besides the image, however the image is previewed in the browser. I checked and there are no errors. The network tab shows a 200, what's even weirder is that when I look at the data when I download the html as png, in the preview tab it shows the image I upload, but doesn't come through when I download the html. before the cors error, I experienced this same issue with chrome. — Reply to this email directly, view it on GitHub <#348 (comment)>, or unsubscribe https://github.com/notifications/unsubscribe-auth/AWAMRK2OTO24IJPAJEKPL6TWOCM5BANCNFSM6AAAAAATAKQYQM . You are receiving this because you were mentioned.Message ID: @.>

Yehuda-Edelstein · 2022-12-30T15:41:56Z

After going over the issue more, it's definitely limited to safari.

dhruvilxcode · 2022-12-31T06:20:20Z

I am facing a similar issue, I tested the library with Chrome on iOS, and The behaviour is the same as safari on iOS.
The issue is only on iPhone. as I tested with Android, and Desktop, I got good results.

If anyone has a fix for it, I would greatly appreciate it. 👍🏻

Yehuda-Edelstein · 2023-01-01T00:17:02Z

I have the same issue with desktop safari, as well as with safari on iphone.

…

On Sat, Dec 31, 2022 at 1:20 AM Dhruvil ***@***.***> wrote: I am facing a similar issue, I tested the library with Chrome on iOS, and The behaviour is the same as safari on iOS. The issue is only on iPhone. as I tested with Android, and Desktop, I got good results. If anyone has a fix for it, I would greatly appreciate it. 👍🏻 — Reply to this email directly, view it on GitHub <#348 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AWAMRK32SUWTYBVNPCEMAILWP7GC7ANCNFSM6AAAAAATAKQYQM> . You are receiving this because you were mentioned.Message ID: ***@***.***>

s-kris · 2023-01-01T09:11:12Z

Same issue.
The image is lost after downloading.

Bug appears in safari on iPhone and desktop.

dhruvilxcode · 2023-01-14T05:40:48Z

Used html2canvas for now, and rendered the dynamic content on the page until the image is created, once the image is created, removed the dynamic content from a page. Through this process, I was able to get good results on iPhone (Safari and Chrome) and Android. Although you have to sacrifice on performance. Now, a 1080x1920 Pixel hi-res image takes anywhere between 2-7 seconds.

minusmo · 2023-01-21T08:57:49Z

@dhruvilxcode hey! Can you please tell me how you overcame this issue with ios safari?
I also have same issue and tried other solutions but nothing worked.

dhruvilxcode · 2023-01-21T09:11:51Z

@minusmo I replaced this library with the html2canvas. what I did is rendered the content on the page by inserting the dynamically generated content then I called the method to convert data to base64 image. once image is generated I removed the content from page that I added previously programmatically.

The implementation really depends on the usecase. and I found that if content is available on the page (not dynamic content) then these libraries works well.

qq15725 · 2023-02-02T10:47:00Z

The problem seems to be a bug of Safari requiring multiple delayed calls to drawImage 😓

#361 (comment)

Yehuda-Edelstein · 2023-03-13T03:37:07Z

The problem seems to be a bug of Safari requiring multiple delayed calls to drawImage 😓

#361 (comment)

How can I implement that instead of this package? Yours is typscript, can't figure out how to replace this function with that.

Yehuda-Edelstein · 2023-04-18T04:52:46Z

Hello Yehuda! We faced the same issue, and it turned out to be a cors error with our image server. checkout the network Tab to see if that's the case. If it is, we solved it through the server configuration.

Hope it helps!

your issue was also exclusively on Safari?

wenlittleoil · 2023-04-24T09:42:12Z

I have the same issue with iphone mobile, the android mobile and pc browser web are all normal.

juliabelle1 · 2023-06-01T12:27:05Z

Hi! I also had the same issue with safari when I used html-to-image https://www.npmjs.com/package/html-to-image. I solved it with another library html2canvas https://www.npmjs.com/package/html2canvas. I have converted the html to image in this library and rendered them in @react-pdf/renderer.

Here is my code:
const [image, setImage]=useState(null)

function to convert image

const handleCreateImage = async () => {
    const element = document.getElementById('element-id'),
      canvas = await html2canvas(element),
      data = canvas.toDataURL("image/jpg", 1);
    setImage(data);
  };

this data i convert to image
<div id='element-id'>some data</div>

And here I render my image in pdf.

<PDFViewer style={viewerStyle}>
        <Document>
          <Page size="A4" style={pageStyle}>
            <View style={styles.section}>
              <Image src={`${image}`} />
            </View>
          </Page>
        </Document>
      </PDFViewer>

Hope it will help.

mattscotty · 2024-03-05T15:53:53Z

The problem seems to be a bug of Safari requiring multiple delayed calls to drawImage 😓
#361 (comment)

How can I implement that instead of this package? Yours is typscript, can't figure out how to replace this function with that.

Did you figure this out?
I'm in the same boat.

Ironically I'm trying to migrate from html-to-canvas because of issues with nested images inside SVGs.
html-to-image solves my issues and seems more accurate, but isn't working on safari :(

s-kris · 2024-03-06T18:51:58Z

I switched to this lib: https://github.com/qq15725/modern-screenshot
Works great.

mattscotty · 2024-03-07T09:35:49Z

I switched to this lib: https://github.com/qq15725/modern-screenshot Works great.

Thanks @s-kris you've saved the day with that, much appreciated.
This is the third or fourth type of plugin I've tried and this one seems to be the best so far.
Just one issue I can see with pseudo element font icons not working, but it's a minor issue;
qq15725/modern-screenshot#68

s-kris · 2024-03-09T06:38:52Z

Oh! I didn't know the font issue.

But glad it helped you.

MohamedAlosaili · 2024-03-12T12:12:46Z

Hello Yehuda! We faced the same issue, and it turned out to be a cors error with our image server. checkout the network Tab to see if that's the case. If it is, we solved it through the server configuration.

Hope it helps!

Thanks your solution worked with me. Another way might help is to download the image before add it to the dom that being converted into an image.

hungdev · 2024-08-28T04:56:49Z

I switched to this lib: https://github.com/qq15725/modern-screenshot Works great.

greate, thank for sharing solution

Yehuda-Edelstein added the bug label Dec 16, 2022

Yehuda-Edelstein changed the title ~~Image is displayed in the browser, but doesn't come through with download~~ Image is displayed in browser, but doesn't come through with download (Safari) Dec 26, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Image is displayed in browser, but doesn't come through with download (Safari) #348

Image is displayed in browser, but doesn't come through with download (Safari) #348

Yehuda-Edelstein commented Dec 16, 2022 •

edited

Loading

biiibooo bot commented Dec 16, 2022

pabloiea1995 commented Dec 17, 2022

Yehuda-Edelstein commented Dec 18, 2022

Yehuda-Edelstein commented Dec 18, 2022

Yehuda-Edelstein commented Dec 18, 2022

pabloiea1995 commented Dec 18, 2022

labaran1 commented Dec 19, 2022

Yehuda-Edelstein commented Dec 19, 2022 via email

labaran1 commented Dec 19, 2022

Yehuda-Edelstein commented Dec 19, 2022

labaran1 commented Dec 19, 2022

Yehuda-Edelstein commented Dec 19, 2022

labaran1 commented Dec 19, 2022

Yehuda-Edelstein commented Dec 19, 2022 via email

labaran1 commented Dec 19, 2022

Yehuda-Edelstein commented Dec 30, 2022

dhruvilxcode commented Dec 31, 2022

Yehuda-Edelstein commented Jan 1, 2023 via email

s-kris commented Jan 1, 2023

dhruvilxcode commented Jan 14, 2023

minusmo commented Jan 21, 2023

dhruvilxcode commented Jan 21, 2023

qq15725 commented Feb 2, 2023 •

edited

Loading

Yehuda-Edelstein commented Mar 13, 2023

Yehuda-Edelstein commented Apr 18, 2023

wenlittleoil commented Apr 24, 2023

juliabelle1 commented Jun 1, 2023 •

edited

Loading

mattscotty commented Mar 5, 2024 •

edited

Loading

s-kris commented Mar 6, 2024

mattscotty commented Mar 7, 2024

s-kris commented Mar 9, 2024

MohamedAlosaili commented Mar 12, 2024

hungdev commented Aug 28, 2024

Image is displayed in browser, but doesn't come through with download (Safari) #348

Image is displayed in browser, but doesn't come through with download (Safari) #348

Comments

Yehuda-Edelstein commented Dec 16, 2022 • edited Loading

Expected Behavior

Current Behavior

Possible Solution

Steps To Reproduce

Your Environment

biiibooo bot commented Dec 16, 2022

pabloiea1995 commented Dec 17, 2022

Yehuda-Edelstein commented Dec 18, 2022

Yehuda-Edelstein commented Dec 18, 2022

Yehuda-Edelstein commented Dec 18, 2022

pabloiea1995 commented Dec 18, 2022

labaran1 commented Dec 19, 2022

Yehuda-Edelstein commented Dec 19, 2022 via email

labaran1 commented Dec 19, 2022

Yehuda-Edelstein commented Dec 19, 2022

labaran1 commented Dec 19, 2022

Yehuda-Edelstein commented Dec 19, 2022

labaran1 commented Dec 19, 2022

Yehuda-Edelstein commented Dec 19, 2022 via email

labaran1 commented Dec 19, 2022

Yehuda-Edelstein commented Dec 30, 2022

dhruvilxcode commented Dec 31, 2022

Yehuda-Edelstein commented Jan 1, 2023 via email

s-kris commented Jan 1, 2023

dhruvilxcode commented Jan 14, 2023

minusmo commented Jan 21, 2023

dhruvilxcode commented Jan 21, 2023

qq15725 commented Feb 2, 2023 • edited Loading

Yehuda-Edelstein commented Mar 13, 2023

Yehuda-Edelstein commented Apr 18, 2023

wenlittleoil commented Apr 24, 2023

juliabelle1 commented Jun 1, 2023 • edited Loading

mattscotty commented Mar 5, 2024 • edited Loading

s-kris commented Mar 6, 2024

mattscotty commented Mar 7, 2024

s-kris commented Mar 9, 2024

MohamedAlosaili commented Mar 12, 2024

hungdev commented Aug 28, 2024

Yehuda-Edelstein commented Dec 16, 2022 •

edited

Loading

qq15725 commented Feb 2, 2023 •

edited

Loading

juliabelle1 commented Jun 1, 2023 •

edited

Loading

mattscotty commented Mar 5, 2024 •

edited

Loading