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. 將 canvas 制作為每個 PNG 的 go
3. 將這些中的每一個添加到 PDF 就像你 go
4. 檢查數組長度是否有更多圖像。 如果是這樣， addPage()
5. 添加then()方法以確保它僅在完成所有操作后才保存 PDF。 此外，在這個then()方法中，檢查循環索引的位置，以便在添加最后一個圖像后只保存 PDF。

在我的示例中，這兩個藍色小塊將是添加到 PDF 的圖像。 現在，由於沙盒限制，此示例將無法在 Stack Overflow 上運行，但您可以在此處查看有效的 JSFiddle。

 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>

更新

以下是使用<img>標簽而不是使用 Html2canvas 創建圖像的方法。 在此示例中，您根本不需要 Html2canvas。 我已經更新了上面的 JSFiddle 鏈接來展示這個例子。

 const imgs = [...document.querySelectorAll('.img')] const btn = document.querySelector('a') btn.addEventListener('click', () => { const doc = new jsPDF() let dataUrl async function makeImg(img) { let blob = await fetch(img.src).then(res => res.blob()); dataUrl = await new Promise(resolve => { let reader = new FileReader(); reader.onload = () => resolve(reader.result); reader.readAsDataURL(blob); }) } imgs.forEach((a, i) => { makeImg(a).then(res => { doc.addImage(dataUrl, 'PNG', 45, 45, a.style.width, a.style.height) if (imgs.length > (i+1)) { doc.addPage() } }).then(() => { if ((i+1) === imgs.length) { doc.save('MyPdf.pdf') } }) }) })

 <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>