bubkoo / html-to-image

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

Doesn't save background image on iPhone, but works on web — CORS issue? #228

Closed thestevenmellor closed 2 years ago

thestevenmellor commented 2 years ago

I have an app that uses html to image to make screenshots.

it's react / capacitor app that runs on my iOS device.

It renders the preview of the background image on the device, but when I save it to the Photo gallery, the background image is black.

css gradients seem to save perfectly, too.

It also works perfectly on desktop / web — so this is strictly a mobile issue.

Could it be a CORS issue?

Trying to move away from html2Canvas as htmlToImage has higher quality.

Here are the two screenshots.

`async getJpg(){ await htmlToImage.toJpeg(document.getElementById('capture'), { quality: 1 }) .then( (dataUrl) => { var link = document.createElement('a'); link.download = 'my-image-name.jpeg'; link.href = dataUrl;

this.setState({screenshotUrl: link.href});
console.log(link.href);
if (isMobile) {
  Clipboard.write({image: link.href });

  Haptics.impact({ style: ImpactStyle.Heavy });
  const media = new Media();
  media.getAlbums().then((res)=>{
    let myAlbums = res.albums;
    media.savePhoto({ path: link.href })
    .then(
      console.log('success', link.href),
      this.savedToast()
      )
    .catch(console.log('error'));

  });

}else{
   //Downloaded file
  link.click();
  this.setState({myClipboardImg: link.href});
  this.savedToast()
}
// var w = window.open("");
// w.document.write(myimage.outerHTML);

}); }`

IMG_0164 IMG_0165 IMG_0167

biiibooo[bot] commented 2 years ago

👋 @thestevenmellor

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] commented 2 years ago

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! 💪💯

Yhozen commented 2 years ago

any updates?

petergeorgas commented 2 years ago

I am kinda new to the world of what this library is actually doing, but I am experiencing something similar, except it doesn't work on web. I am making sharable Tweet Snippets like yourself, but the profile picture returned from my calls to the Twitter API does not appear in the same image. See #238 for more info.

biiibooo[bot] commented 2 years ago

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! 💪💯

biiibooo[bot] commented 2 years ago

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! 💪💯

biiibooo[bot] commented 1 year ago

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.