html2canvas + jsPDF cut off image

Question

I can't get the problem fixed that my image is always cut off in the PDF file. The PDF size seems to be correct but I can't see my entire page as an image. I have been trying for hours but without success.

Code:

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.3/jspdf.min.js"></script>
<script src="https://html2canvas.hertzen.com/dist/html2canvas.js"></script>
<script src="https://html2canvas.hertzen.com/dist/html2canvas.min.js"></script>

<script>    
     
  function addWaterMark(pdf) {
  var totalPages = pdf.internal.getNumberOfPages();
         
  for (i = 1; i <= totalPages; i++) {
    pdf.setPage(i);
    pdf.addImage("data:image/png;base64,......", "JPEG", 20, 40, 130, 30);  
  }

  return pdf;
}
     
    function getPDF(){

        var HTML_Width = $("div#mycontent").width();
        var HTML_Height = $("div#mycontent").height();
        var top_left_margin = 100;
        var PDF_Width = HTML_Width+(top_left_margin*2);
        var PDF_Height = $("div#mycontent").height();
        var canvas_image_width = HTML_Width;
        var canvas_image_height = HTML_Height/1.1;
        
        var totalPDFPages = Math.ceil(HTML_Height/PDF_Height)-1;
        
        
        html2canvas($("div#mycontent")[0],{allowTaint:true},{pagesplit: false},{scrollY: -window.scrollY}).then(function(canvas) {
            canvas.getContext('2d');
            console.log(canvas.height+"  "+canvas.width);
            
            var imgData = canvas.toDataURL("image/jpeg", 0.99);
            var pdf = new jsPDF('p', 'pt',  [PDF_Width, PDF_Height]);
            pdf.addImage(imgData, 'JPEG', top_left_margin, top_left_margin,canvas_image_width,canvas_image_height);
            

            pdf = addWaterMark(pdf);
            pdf.save("test.pdf");
            
            
        });
    };   
   
 </script>

Now:

Image Now

What i want:

Image what i want

In Developer Tool the Content Height is: 20887

Any Solution for this?

Answer 1

You could try changing to portrait or landscape according to width-height of the image. I was getting some cut images and it got fixed this way.

If width > height use landscape "l", if height > width use portrit "p":

html2canvas(document.getElementById(id_div)).then(canvas => {
        var w = document.getElementById(id_div).offsetWidth;
        var h = document.getElementById(id_div).offsetHeight;
        var img = canvas.toDataURL("image/jpeg", 1);

        if(w > h){
            var  doc = new jsPDF('l', 'mm', [w+100, h+50]);
        }
        else{
            var  doc = new jsPDF('p', 'mm', [h+100, w+50]);
        }
        doc.addImage(img, 'JPEG', 10, 10);
        doc.save('chart.pdf');
        
    }).catch(function(e) {
        console.log(e.message);
    });