Html2Canvas和jsPDF每页添加1张图像

Question

我正在使用jsPDF和html2canvas（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>

我正在使用imagesnumber来计算div内的图像数。

有什么想法吗？

Answer 1

您可以这样操作：

1. 浏览所有图像
2. 随时随地将画布制作为每个的PNG
3. 将这些都添加到PDF中]
4. 检查阵列长度是否还有更多图像。如果是这样，addPage()
5. 添加then()方法以确保仅在完成所有操作后才保存PDF。另外，在此then()方法中，检查以查看循环索引在哪里，以便仅在添加最后一个图像之后才保存PDF。

在我的示例中，这两个蓝色小块将是 被添加到PDF。现在，该示例将不会在Stack Overflow上运行 由于沙箱的限制，但是您可以看到working JSFiddle here.

const imgs = [...document.querySelectorAll('.img')]
const btn = document.querySelector('a')

btn.addEventListener('click', () => {
    const doc = new jsPDF();
    imgs.forEach((a, i) => {
        html2canvas(a)
        .then(canvas => {
            const img = canvas.toDataURL('image/png')
            doc.addImage(img,'PNG', 45, 45, 100, 100);
            if (imgs.length > (i+1)) {
                doc.addPage();
            }
        })
        .then(() => {
            if ((i+1) === imgs.length) {
                doc.save('MyPdf.pdf')
            }
        })
    })
})
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>