如何在其他 jsPdf 元素之间添加画布图像

Question

我已使用html2canvas 将特定的<div> 标记转换为<canvas>，我需要将此转换后的画布图像与JsPdf 等其他JsPdf 元素和文本一起添加。

谢谢。

Answer 1

这是我在 jsfiddle 上的解决方案http://jsfiddle.net/huynhsamha/q5w8pvdn/

您可以在 jsfiddle 上运行，它正在工作。这是代码 sn-p。

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>