为了账号安全,请及时绑定邮箱和手机立即绑定

每页添加 1 张图片

每页添加 1 张图片

Smart猫小萌 2022-09-23 16:33:29

我正在使用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内的图像数量。


有什么想法吗?


查看完整描述

1 回答

?
30秒到达战场

TA贡献1470条经验 获得超6个赞

你可以这样做:

  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>


查看完整回答
反对 回复 6天前
  • 1 回答
  • 0 关注
  • 10 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信