Html2canvas is rendering cropped image on mobile website

Viewed 125

So I am using html2canvas and Jspdf to convert my react/nextJs website to pdf. It's working fine on desktop but mobile, the images used are getting cropped, and I can't find where the issue is coming from

Here's the code snippet for html2canvas and pdf generation

const printDocument = () => {
    const input = document.getElementById('divToPrint');
    html2canvas(input, {
        scale: "2", letterRendering: 1, allowTaint : true, onrendered : function (canvas) { } })
      .then((canvas) => {
        const imgData = canvas.toDataURL('image/jpeg');
        const pdf = isMobile? new jsPDF('p', 'pt', [canvas.width, canvas.height]) : new jsPDF('l', 'pt', [canvas.width, canvas.height])
        pdf.addImage(imgData, 'jpeg', 0, 0,canvas.width, canvas.height);
        pdf.save("download.pdf");
      })
    ;
  }

The website : enter image description here

and the rendered pdf enter image description here

0 Answers
Related