如何使用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; 
     } 
    } 
}; 

我使用剝離文件名爲ìd，直接獲得相關圖像的一部分，該原因是loadPictures函數中的雙循環有一點點的開銷，如果你覺得這個太糟糕了，可以隨意將它改成一個真正的數組，在這裏你可以直接得到圖片數爲pictures.length。

然後，這id也被用於jsPDF爲alias爲每個圖像，以加快整個過程，從而完整的圖像路徑存儲，而不是在picture.src。

這是（更多PR以下）以上所有的東西的用法：

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

所以，我相信這可以進一步簡化和剝離，但無論如何，你可以得到的想法。