How to add canvas image in between the other jsPdf elements

Question

I have converted the particular <div> tag into <canvas> using html2canvas and I need to add this converted canvas image with other JsPdf elements like Autotables and texts.

Thanks.

Answer 1

This is my solution on jsfiddle http://jsfiddle.net/huynhsamha/q5w8pvdn/

You can run on jsfiddle, it's working. This is code snippet.

const html2canvas = window.html2canvas;

$(document).ready(function() {
    
    $('#download').click(function() {
      html2canvas(document.body).then(function(canvas) {
        var imgData = canvas.toDataURL('image/png');              
        var doc = new jsPDF();
        doc.addImage(imgData, 'PNG', 10, 10);
        doc.save('file.pdf');
      });
    });
});

button {
  margin: 50px;
}

<p>The library has two sets of tests. The first set is a number of qunit tests that check that different values parsed by browsers are correctly converted in html2canvas. To run these tests with grunt you'll need phantomjs.</p>

<p>The other set of tests run Firefox, Chrome and Internet Explorer with webdriver. The selenium standalone server (runs on Java) is required for these tests and can be downloaded from here. They capture an actual screenshot from the test pages and compare the image to the screenshot created by html2canvas and calculate the percentage differences. These tests generally aren't expected to provide 100% matches, but while committing changes, these should generally not go decrease from the baseline values.</p>

<button id="download">Download PDF</button>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://unpkg.com/html2canvas@1.0.0-alpha.12/dist/html2canvas.min.js"></script>
<script src="https://unpkg.com/jspdf@1.4.1/dist/jspdf.min.js"></script>