web-dev-qa-db-ja.com

jspdfを使用してPDFに画像を追加する

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

    }
javascriptjqueryimagejspdf
20
Navya

確かではありませんが、出力を追加する前に作成するため、画像が追加されない場合があります。試してください：

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');
}
14
Leon Hooijer

少し遅いかもしれませんが、最近この状況に来て、簡単な解決策を見つけました。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);
});
12
AlanMo

余分なbase64ライブラリを追加する必要はありません。 シンプルな5行ソリューション-

var img = new Image();
img.src = path.resolve('sample.jpg');

var doc = new jsPDF('p', 'mm', 'a3');  // optional parameters
doc.addImage(img, 'PNG', 1, 2);
doc.save("new.pdf");
7
Abhishek Sinha

Base64を定義しましたか？定義していない場合、次のエラーが発生します。

ReferenceError：Base64は定義されていません

7
annelorayne

これはAngular 2：

var img = new Image()
img.src = 'assets/sample.png'
pdf.addImage(img, 'png', 10, 78, 12, 15)

jsPDFバージョン1.5.3

アセットディレクトリはsrc Angularプロジェクトルートのディレクトリ

4
acn

上記のコードはうまくいきませんでした。私は新しい解決策を見つけました：

 var pdf = new jsPDF();
 var img = new Image;
 img.onload = function() {
     pdf.addImage(this, 10, 10);
     pdf.save("test.pdf");
 };
 img.crossOrigin = "";  
 img.src = "assets/images/logo.png";
4
punitha puni

便利だと思います。

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/

3
Saboor Awan

Base64が定義されていないという同じ問題がありました。 オンラインエンコーダー にアクセスして、出力を変数に保存しました。これはおそらく多くの画像には理想的ではありませんが、私のニーズには十分でした。

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

最初に、イメージをロードし、データを変換してから、jspdfに（TypeScriptで）渡す必要があります。

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'));
    });
}
0
Gerard Carbó
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;
        }

上記の関数を使用して、imageimageオブジェクトを取得します。次に、pdfファイルに追加する次のpdf.addImage（getImage（url）、 'png'、x、y、imagewidth、imageheight）;

0
Hongyang

あなたが持っている場合

ReferenceError：Base64は定義されていません

ファイルをアップロードできます here 次のようになります：

data：image/jpeg; base64、/ veryLongBase64Encode ....

あなたのjsで：

var imgData = 'data:image/jpeg;base64,/veryLongBase64Encode....'
var doc = new jsPDF()

doc.setFontSize(40)
doc.addImage(imgData, 'JPEG', 15, 40, 180, 160)

例を見ることができます here

0
Ibrahima Timera