dom-to-image

dom-to-image copied to clipboard

domtoimage .toPng(sealImgRef.current, { style: {}, }).then((dataUrl) => { //Does not capture the image }).catch((error)=>{ //Does not throw any error });

The problem is only in i-phone, chrome browser. Safari does not allow.

Please provide the proper solution I am stuck and its a blocker for me. Thanks.

I am facing the same issue. Any help by the author would be appreciated. :)

I managed to solve this problem!

It's not pretty, but it gets the job done. I simply executed domtohtml twice..

    let item = document.getElementById('whiteboard-frame');
    console.log(item)
    domtoimage.toPng(item)
    .then((dataUrl) => {
      domtoimage.toPng(item)
      .then((dataUrl1) => {
          this.savedImage = dataUrl1;
          console.log(this.savedImage)
      })
      .catch((error) => {
          console.error('oops, something went wrong!', error);
      });
    })
    .catch((error) => {
        console.error('oops, something went wrong!', error);
    });

And this now works for me on PC, Android, iPad, and iPhone.

More info in this thread: https://github.com/tsayen/dom-to-image/issues/343#issuecomment-685428224

@SimonKomlos it worked. thanks. Don't know whats the hack behind calling it two times!

Worked on safari, but does not work on iPhone (Chrome and Safari)

I refactored it to async/await style: `(async() => {

const node = document.getElementById("diploma");

await htmlToImage.toJpeg(node);

const dataUrl2 = await htmlToImage.toJpeg(node);

const link = document.createElement("a");

link.href = dataUrl2;

link.download = "diploma.jpg";

document.body.appendChild(link);

link.click();

document.body.removeChild(link);

})();`

Has anyone tested this hack with react? Can't seem to get it to work.