使用jspdf添加PDF圖像

Question

我使用jspdf將圖像轉換爲PDF。

我已經使用base64encode將圖像轉換爲URI。但問題是控制檯中沒有顯示錯誤或警告。

使用文本Hello World生成PDF，但未添加圖像。

這是我的代碼。

function convert(){ 
     var doc = new jsPDF(); 
     var imgData = 'data:image/jpeg;base64,'+ Base64.encode('Koala.jpeg'); 
     console.log(imgData); 
     doc.setFontSize(40); 
     doc.text(30, 20, 'Hello world!'); 
     doc.output('datauri'); 
     doc.addImage(imgData, 'JPEG', 15, 40, 180, 160); 

    } 

Answer 1

雖然我不確定，但可能無法添加圖像，因爲您在添加圖像之前先創建輸出。試試：

function convert(){ 
    var doc = new jsPDF(); 
    var imgData = 'data:image/jpeg;base64,'+ Base64.encode('Koala.jpeg'); 
    console.log(imgData); 
    doc.setFontSize(40); 
    doc.text(30, 20, 'Hello world!'); 
    doc.addImage(imgData, 'JPEG', 15, 40, 180, 160); 
    doc.output('datauri'); 
} 

Answer 2

你定義了Base64？如果你沒有定義，發生這個錯誤：

ReferenceError: Base64 is not defined

Answer 3

我覺得它很有用。

var imgData = 'data:image/jpeg;base64,verylongbase64;' 

var doc = new jsPDF(); 

doc.setFontSize(40); 
doc.text(35, 25, "Octonyan loves jsPDF"); 
doc.addImage(imgData, 'JPEG', 15, 40, 180, 180); 

http://mrrio.github.io/jsPDF/

Answer 4

我有沒有被定義的Base64同樣的問題。我去了an online encoder，然後將輸出保存到一個變量中。這可能不是很多圖像的理想選擇，但對於我的需求來說，這已經足夠了。

function makePDF(){ 
    var doc = new jsPDF(); 
    var image = "data:image/png;base64,iVBORw0KGgoAA.."; 
    doc.addImage(image, 'JPEG', 15, 40, 180, 160); 
    doc.save('title'); 
} 

Answer 5

private getImage(imagePath): ng.IPromise<any> { 
      var defer = this.q.defer<any>(); 
      var img = new Image(); 
      img.src = imagePath; 
      img.addEventListener('load',()=>{ 
       defer.resolve(img); 
      }); 


      return defer.promise; 
     } 

使用上述函數的getImage對象。 然後下面添加到pdf文件 pdf.addImage（getImage（url），'png'，x，y，imagewidth，imageheight）;

Answer 6

javascript function is like this 

function (imagePath) { 
       var defer = this.q.defer(); 
       var img = new Image(); 
       img.src = imagePath; 
       img.addEventListener('load', function() { 
        defer.resolve(img); 
       }); 
       return defer.promise; 
      }; 

Answer 7

首先你需要加載圖像，數據轉換，然後傳遞給jspdf（以打字稿）：

loadImage(imagePath): ng.IPromise<any> { 
    var defer = this.q.defer<any>(); 
    var img = new Image(); 
    img.src = imagePath; 
    img.addEventListener('load',()=>{ 
      var canvas = document.createElement('canvas'); 
      canvas.width = img.width; 
      canvas.height = img.height; 

      var context = canvas.getContext('2d'); 
      context.drawImage(img, 0, 0); 

      var dataURL = canvas.toDataURL('image/jpeg'); 

      defer.resolve(dataURL); 
    }); 

    return defer.promise; 
} 

generatePdf() { 
    this.loadImage('img/businessLogo.jpg').then((data) => { 
     var pdf = new jsPDF(); 
     pdf.addImage(data,'JPEG', 15, 40, 180, 160); 
     pdf.text(30, 20, 'Hello world!'); 
     var pdf_container = angular.element(document.getElementById('pdf_preview')); 
     pdf_container.attr('src', pdf.output('datauristring')); 
    }); 
} 

Answer 8

也許有點晚了，但我最近來到這個情況，發現一個簡單的解決方案，需要2個功能。

1. 加載圖片。

   function getImgFromUrl(logo_url, callback) { 
       var img = new Image(); 
       img.src = logo_url; 
       img.onload = function() { 
        callback(img); 
       }; 
   } 
   

2. 在第一步onload事件

   ，做一個回調使用jspdf文檔。

   function generatePDF(img){ 
       var options = {orientation: 'p', unit: 'mm', format: custom}; 
       var doc = new jsPDF(options); 
       doc.addImage(img, 'JPEG', 0, 0, 100, 50);} 
   

3. 使用上述功能。

   var logo_url = "/images/logo.jpg"; 
   getImgFromUrl(logo_url, function (img) { 
       generatePDF(img); 
   });