Javascript Html2Canvas和jsPDF每页添加1个图像

我使用jsPDF和html2canvas（0.4.1）将潜水舱内的图像保存到sinlge 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>

$（文档）.ready（函数（）{
$（“#modalSave”）。单击（函数（）{
var inputValue=$（'#form29'）.val（）
var imagesnumber=$（“#imagesPreview img”）。长度；
//警报（图像编号）；
var imgData；
html2canvas（document.getElementById（“imagesPreview”）{
乌塞科尔斯：没错，
onrendered：函数（画布）{
imgData=canvas.toDataURL（'image/png'）；
//制作Pdf文档
var doc=新的jsPDF（'p'、'pt'、'a4'）；
如果（图像编号>1）{
var i；
对于（i=1；i

我使用imagesnumber来计算div中的图像数

---

有什么想法吗？

你可以这样做：

循环浏览所有图像

制作一张画布，以便在运行时对每个对象进行PNG

将这些内容添加到PDF中

检查数组长度是否还有更多图像。如果是这样，

addPage（）

添加一个

then（）

方法，以确保它仅在完成所有操作后保存PDF。另外，在这个

then（）

方法中，检查循环索引在哪里，以便只在添加最后一幅图像后保存PDF

在我的示例中，这两个蓝色小块将是 添加到PDF中。现在，这个示例不会在堆栈溢出上运行 由于沙箱的限制，但您可以看到

const imgs=[…document.querySelectorAll（'.img'）]
const btn=document.querySelector（'a'）
btn.addEventListener（'单击'，（）=>{
const doc=new jsPDF（）
imgs.forEach（（a，i）=>{
html2canvas（a）
。然后（画布=>{
const img=canvas.toDataURL（'image/png'）
addImage文件（img，'PNG'，45，45，100，100）；
如果（imgs.length>（i+1））{
doc.addPage（）
}
})
.然后（（）=>{
如果（（i+1）==imgs.长度）{
doc.save（'MyPdf.pdf'）
}
})
})
})

span{宽度：20px；高度：20px；背景色：蓝色；显示：内联块}
a{display:block}

如果我用图像替换你的跨度，并留下类名img，它就不起作用了。我在导出的pdf中得到空白页。知道吗？嘿@YeorgiosLaskos。。嗯，我确实知道它可能是什么。我认为这是因为html2canvas将HTML元素呈现为

元素，然后呈现为实际图像。当您从一开始就使用实际图像时，html2canvas很难将它们呈现为

元素。我认为解决方案可能是首先使用

toDataUrl（）

方法创建这些图像的数据URL，在这种情况下，您可能实际上不需要html2canvas。现在是我睡觉的时间了，但我可以试着找出答案，然后在早上更新答案，如果这很酷的话？非常感谢你的时间。。当你有空闲时间时，请更新你的代码。不幸的是，我不能在你的回答中按下向上箭头，因为它需要15+的声誉…：-（很高兴兄弟=）我要看看我是否能很快找到答案并更新答案。啊，谢谢你的努力，至少伙计，我很感激。我将对你的问题投赞成票，因为没有其他人回答这一事实意味着这是一个棘手的问题，也是一个好问题。这会给你一些分数；）这还不够，但你会有更多的观点。@YeorgiosLaskos我已经弄明白并更新了答案。我希望它能帮助人类。如果需要更多帮助，请大声呼喊=）