html2canvas: dataURL is always empty (only) on mobile devices

  Kiến thức lập trình

Here is my code:

const element = document.querySelector("#copycontent");
const canvas = await html2canvas(element, { logging: true });
const imgURL = canvas.toDataURL('image/png');
const pdf = new jsPDF();
pdf.addImage(imgURL, 'PNG', 0, 0, 170, 53.5);
pdf.save('information.pdf');

This code works like a charm in all browsers on desktop. As far as I switch to a mobile device (iphone, android, ipad etc.) it gives me the following error: Supplied Data is not a valid base64-String jsPDF.convertStringToImageData

What i’ve found out, the error is correct, because imgURL is only data:,. The element is found correctly by the code (also on my phone), but if the function html2canvas will be executed, is canvas an empty canvas – and the result is that imgURL = data:,.

Can anybody help me with this issue?
Thanks! 🙂

LEAVE A COMMENT