jspdfを使用してpdfに画像を追加

Question

jspdfを使用して画像をPDFに変換しています。

私はbase64encodeを使用してイメージをURIに変換しました。しかし問題は、コンソールにエラーや警告が表示されていないことです。

PDFはHello Worldというテキストで生成されますが、画像は追加されません。

ここに私のコードです。

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）;

あなたは、画像をロードするデータを変換した後、（typescriptです中）jspdfに渡す必要

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

まず：

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 docを使用するコールバックを作成します。

   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); 
   });