如何使用 jsPDF 将多个图像添加到 PDF 中

Question

参数“链接”是图像链接的数组。

function genPDF_fromUrl(link) {
    var doc = new jsPDF();
    doc.setFontSize(40);
    doc.text(80, 25, 'MAP001');

    const rtnimg = compute(doc, link);
    console.log(rtnimg)
    Promise.all(rtnimg).then((success) => {
        doc.save("map.pdf");
    });
    console.log("Finish hello PDF!")
}
function compute(doc, link) {       
    return link.map(l => {
        let x = 0;
        let y = 0;
        x += 10;
        y += 10;
        return new Promise((resolve, reject) => {
            var genImg = new Image();
            genImg.setAttribute('crossOrigin', 'anonymous');
            genImg.src = l;
            console.log("genimg: ", genImg);

            genImg.onload = function () {   
            console.log("doc: ", doc);  
                doc.addImage(genImg, 'PNG',  x, y, 100, 100);    
            }
            resolve();
        });
    });
}

结果始终是只有文本“MAP001”的 PDF，我不确定为什么不显示图像。

下面是控制台输出：

genImg:  is a img tag like < img crossorigin=​"anonymous" src=​"https:​/​/​cors.now.sh ... a link" >

rtnimg : (33) [Promise, Promise, Promise, Promise, Promise, Promise, Promise, Promise, Promise, Promise, Promise, Promise, Promise, Promise, Promise, Promise, Promise, Promise, Promise, Promise, Promise, Promise, Promise, Promise, Promise, Promise, Promise, Promise, Promise, Promise, Promise, Promise, Promise]

Finish hello PDF!

doc:  {internal: {…}, addPage: ƒ, setPage: ƒ, insertPage: ƒ, movePage: ƒ, …}

以下是我在 PDF 上仅打印图像的成功尝试。

function genPDF_fromUrl(link) {
        var genImg = new Image();
        genImg.setAttribute('crossOrigin', 'anonymous');
        genImg.src = link[0];

        genImg.onload = function () {    
        var doc = new jsPDF();
        doc.setFontSize(40);
        doc.text(80, 25, 'MAP001');
        doc.addImage(genImg, 'PNG',  0, 0, 100, 100);         
        doc.save("map.pdf"); 
        }      
}

看起来像“var doc = new jsPDF();”必须在 onload 函数中，但我不能对多个图像执行此操作。

Answer 1

您正在开始创建 PDF，然后等待每个图像。我的建议不是这样做，而是通过调用addImage 函数预加载所有图像并等待所有图像已下载并准备好在 jsPDF 中打印时的回调。

前段时间我是按照以下方式完成的，作为更复杂的 jsPDF 插件的一部分

function Picture(src) {
    this.src = src;
    this.img = null;
}

function Preloader() {
    this.pictures = [];
    this.onpicturesloaded = null;
}

Preloader.prototype.setPicture = function(src) {
    var id = src.split("/").pop().split(".")[0].toLowerCase();
    this.pictures[id] = new Picture(src);
    return this.pictures[id];
};

Preloader.prototype.loadPictures = function() {
    var self = this, pictures = self.pictures, n = 0;
    for(var id in pictures) {
        if(pictures.hasOwnProperty(id)) {
            var pic = self.pictures[id];
            n++;
        }
    }
    for(var id in pictures) {
        if(pictures.hasOwnProperty(id)) {
            var pic = self.pictures[id];
            var decrease = function(e) {
                if(--n == 0) {
                    self.onpicturesloaded();
                }
            }
            var img = new Image();
            img.onload = function() {
                var pic = self.pictures[this.alt];
                pic.img = this;
                decrease();
            };
            img.alt = id;
            img.src = pic.src;
        }
    }
};

我使用 stripped filename 作为ìd 来直接获取关联的图像，因此loadPictures 函数内部的双循环有一点开销，如果你发现这太糟糕了，随意把它改成一个真正的数组，在那里你可以直接得到图片计数为pictures.length。

然后这个id 在jsPDF 中也被用作每个图像的alias，以加快整个过程，从而将完整的图像路径存储在picture.src 中。

这是（更多）上面所有东西的用法：

var pl = new Preloader();
pl.setPicture("pdf/a.jpg");
pl.setPicture("pdf/b.jpg");
pl.setPicture("pdf/c.jpg");

pl.onpicturesloaded = function() {
    var doc = new jsPDF();
    var pic = pl.pictures["a"];
    doc.addImage(pic.img, "jpg", 10, 10, 100, 100, pic.img.alt, "FAST");
    // add more images, print text, and so on
    doc.save('mydocument.pdf');
};  
pl.loadPictures();

请注意，这只是该 jsPDF 插件的即时提取，没有我需要的一些部分，例如，在 canvas 内绘制并将图片数据动态添加到 PDF。

所以，我确信这可以进一步简化和精简，但无论如何，你可以明白这一点。