Open dev-origami opened 3 years ago
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.
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.