每页添加 1 张图片

Question

我正在使用jsPDF和html2扫描（0.4.1）将潜水中的图像保存到一个辛利格PDF。

到目前为止，我的代码几乎可以正常工作，但我有一个问题。

当用户选择多个图像时，图像保存在一个页面中。所以我想要每个图像在不同的页面。我的代码是：

<div id="imagesPreview"></div>

<script>

$(document).ready(function(){

$("#modalSave").click(function(){

var inputValue = $('#form29').val()

var imagesnumber = $("#imagesPreview img").length;

//alert(imagesnumber);

var imgData;

html2canvas(document.getElementById("imagesPreview"),{

    useCORS: true,

    onrendered:function(canvas){

    imgData = canvas.toDataURL('image/png');

    //Make The Pdf Document

    var doc = new jsPDF('p','pt','a4');

    if (imagesnumber > 1){

        var i;

        for (i = 1; i < imagesnumber; i++) 

        {

        doc.addImage(imgData,'PNG',10,10)[i];

        doc.addPage()[i];

        }

    }else{

        doc.addImage(imgData,'PNG',10,10);

    }

        if($('#inputValue').val() == ''){

    doc.save('MyPdf.pdf');

    }else{

    doc.save(inputValue+'.pdf');

    }

    window.open(imgData);

    }

    })

});

});

</script>

我正在使用图像编号来计算div内的图像数量。

有什么想法吗？

Answer 1

你可以这样做：遍历所有图像随时制作每个画布的PNG随时将其中每个添加到 PDF 中检查阵列长度是否有更多图像。㞖addPage()添加一种方法以确保它仅在完成所有操作后保存PDF。此外，在此方法中，请检查循环索引的位置，以便仅在添加最后一个图像后保存 PDF。then()then()在我的例子中，这两个小的蓝色块将是添加到PDF的图像。现在，由于沙盒限制，此示例不会在堆栈溢出上运行，但您可以在此处看到工作正常的 JSFiddle。const imgs = [...document.querySelectorAll('.img')]const btn = document.querySelector('a')btn.addEventListener('click', () => {&nbsp; &nbsp; const doc = new jsPDF()&nbsp; &nbsp; imgs.forEach((a, i) => {&nbsp; &nbsp; &nbsp; &nbsp; html2canvas(a)&nbsp; &nbsp; &nbsp; &nbsp; .then(canvas => {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; const img = canvas.toDataURL('image/png')&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; doc.addImage(img,'PNG', 45, 45, 100, 100);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if (imgs.length > (i+1)) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; doc.addPage()&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; })&nbsp; &nbsp; &nbsp; &nbsp; .then(() => {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if ((i+1) === imgs.length) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; doc.save('MyPdf.pdf')&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; })&nbsp; &nbsp; })})span {width: 20px; height: 20px; background-color: blue; display: inline-block}a {display: block}<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.5.3/jspdf.debug.js" integrity="sha384-NaWTHo/8YCBYJ59830LTz/P4aQZK1sS0SneOgAvhsIl3zBu8r9RevNg5lHCHAuQ/" crossorigin="anonymous"></script><script src="https://html2canvas.hertzen.com/dist/html2canvas.min.js" crossorigin="anonymous"></script><span class="img"></span><span class="img"></span><a href="#">Download PDF</a>更新下面介绍如何对标记执行相同的操作，而不是使用 Html2canvas 来创建图像。在这个例子中，你根本不需要 Html2 堪萨斯。我已经更新了上面的JSFiddle链接来显示此示例。<img>const imgs = [...document.querySelectorAll('.img')]const btn = document.querySelector('a')btn.addEventListener('click', () => {&nbsp; &nbsp; const doc = new jsPDF()&nbsp; &nbsp; let dataUrl&nbsp; &nbsp; async function makeImg(img) {&nbsp; &nbsp; &nbsp; &nbsp; let blob = await fetch(img.src).then(res => res.blob());&nbsp; &nbsp; &nbsp; &nbsp; dataUrl = await new Promise(resolve => {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; let reader = new FileReader();&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; reader.onload = () => resolve(reader.result);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; reader.readAsDataURL(blob);&nbsp; &nbsp; &nbsp; &nbsp; })&nbsp; &nbsp; }&nbsp; &nbsp; imgs.forEach((a, i) => {&nbsp; &nbsp; &nbsp; &nbsp; makeImg(a)&nbsp; &nbsp; &nbsp; &nbsp; .then(res => {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; doc.addImage(dataUrl, 'PNG', 45, 45, a.style.width, a.style.height)&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if (imgs.length > (i+1)) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; doc.addPage()&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; })&nbsp; &nbsp; &nbsp; &nbsp; .then(() => {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if ((i+1) === imgs.length) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; doc.save('MyPdf.pdf')&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; })&nbsp; &nbsp; })})<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.5.3/jspdf.debug.js" integrity="sha384-NaWTHo/8YCBYJ59830LTz/P4aQZK1sS0SneOgAvhsIl3zBu8r9RevNg5lHCHAuQ/" crossorigin="anonymous"></script><img class="img" src="https://i.postimg.cc/NfMXcB4c/Screenshot-2020-06-09-at-18-35-56.png"><img class="img" src="https://i.postimg.cc/NfMXcB4c/Screenshot-2020-06-09-at-18-35-56.png"><a href="#" style="display: block">Download PDF</a>