我正在使用jsPDF和html2canvas(0.4.1),将一个div中的图像保存为单个pdf。
到目前为止,我的代码几乎可以正常工作,但我有一个问题。
当用户选择多张图片时,图像会被保存在同一页中。因此,我希望每个图像都在不同的页面上。我的代码如下:
我正在使用imagesnumber来计算div内部的图像数量。有任何想法吗?
到目前为止,我的代码几乎可以正常工作,但我有一个问题。
当用户选择多张图片时,图像会被保存在同一页中。因此,我希望每个图像都在不同的页面上。我的代码如下:
<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内部的图像数量。有任何想法吗?
<canvas>
元素,然后再呈现为实际图像 - 当您从开始使用实际图像时,html2canvas无法将其呈现为<canvas>
元素。我认为解决方法可能是首先使用toDataUrl()
方法创建这些图像的数据URL,在这种情况下,您可能实际上不需要html2canvas。现在是睡觉时间,但如果可以的话,我可以尝试弄清楚然后在早上更新答案? - undefined