Safari Doesn't display images from URL (CORS enabled) - no error thrown

[bardzh]

Images loaded from URL is not being rendered in safari, chrome has no issues

Expected Behavior

To display images that are provided by url

Current Behavior

Renders a placeholder in size of the original photo but brings empty

Steps To Reproduce

• Load any Image from external resource and place in the element and generate image from HTML, no error is thrown. CORS is also enabled

Your Environment

• html-to-image: 1.6.2
• OS: Mac OS Big Sur (11.2.3)
• React - NextJs
• Browser: Safari 14.0.3

[vivcat[bot]]

👋 @bardiaheshmati

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.

[valtism]

I have this too, but the funny thing is that it only happens on the first try. When I run it a second time, the images are produced correctly. I wonder if it is a thing where Safari is not allowing time for the images to download.

[bardzh]

yes i noticed that too. i don't know if fetching photos are asynchronous or there is something blocking the first view, i noticed a flash like reloading of the photo when i scroll up and down, and exactly after that flash, the photos render again.

[valtism]

This might be an unhelpful comment, but after having edge case after edge case breaking across multiple libraries, I solved my problem by doing the canvas manipulation by hand. My use-case was not overly complicated and working with the canvas directly turned out to not be as scary as I though. If you have a simple enough use-case you might want to consider doing this.

[bardzh]

i tried, converting to canvas to SVG in a hope that it will turn the photo to a base64 and then to jpeg. it doesn't really work.

[pouu69]

i have same issue. how can i use it?

[Blackfaded]

Having the same issue.

[muuuuminn]

I faced the same issue. Please give me a workaround.

[muuuuminn]

My workaround is doing html-to-image twice.

const convertHtml2Image = async (element, isSafari) => {
  if (isSafari) {
    await toPng(element, { cacheBust: true })
  }
  await toPng(element, { cacheBust: true, }).then((dataUrl) => {
    const link = document.createElement('a')
    link.download = 'my-image-name.png'
    link.href = dataUrl
    link.click()
  })
}

[vivcat[bot]]

Hiya! This issue has gone quiet. Spooky quiet. 👻 We get a lot of issues, so we currently close issues after 60 days of inactivity. It’s been at least 20 days since the last update here. If we missed this issue or if you want to keep it open, please reply here. You can also add the label "not-stale" to keep this issue open! As a friendly reminder: the best way to see this issue, or any other, fixed is to open a Pull Request.

Thanks for being a part of the Antv community! 💪💯

[vivcat[bot]]

Hey again! It’s been 60 days since anything happened on this issue, so our friendly neighborhood robot (that’s me!) is going to close it. Please keep in mind that I’m only a robot, so if I’ve closed this issue in error, I’m HUMAN_EMOTION_SORRY. Please feel free to comment on this issue or create a new one if you need anything else. As a friendly reminder: the best way to see this issue, or any other, fixed is to open a Pull Request. Thanks again for being part of the Antv community! 💪💯

[hansanwok]

For me, twice sometimes is nto enough, I loop util it been as expected let imgBase64

  imgBase64 = await toPng(captureRef.current, options)

  while (isSafari && imgBase64.length < 100000) {
    imgBase64 = await toPng(captureRef.current, options)
  }

[vivcat[bot]]

This thread has been automatically locked because it has not had recent activity. Please open a new issue for related bugs and link to relevant comments in this thread.