每页添加 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

你可以这样做：

1. 遍历所有图像

2. 随时制作每个画布的PNG

3. 随时将其中每个添加到 PDF 中

4. 检查阵列长度是否有更多图像。㞖addPage()

5. 添加一种方法以确保它仅在完成所有操作后保存PDF。此外，在此方法中，请检查循环索引的位置，以便仅在添加最后一个图像后保存 PDF。then()then()

在我的例子中，这两个小的蓝色块将是添加到PDF的图像。现在，由于沙盒限制，此示例不会在堆栈溢出上运行，但您可以在此处看到工作正常的 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>

更新

下面介绍如何对标记执行相同的操作，而不是使用 Html2canvas 来创建图像。在这个例子中，你根本不需要 Html2 堪萨斯。我已经更新了上面的JSFiddle链接来显示此示例。<img>

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>