40

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

    }
4

12 に答える 12

29

これはAngular 2でうまくいきました：

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

jsPDF バージョン 1.5.3

assetsディレクトリはAngular プロジェクト ルートのsrcディレクトリにあります

于 2019-01-02T12:32:41.337 に答える
23

よくわかりませんが、追加する前に出力を作成するため、画像が追加されない可能性があります。試す：

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');
}
于 2013-10-14T14:13:11.687 に答える
16

少し遅れているかもしれませんが、最近この状況になり、簡単な解決策を見つけました.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);
});
于 2018-03-01T20:43:04.573 に答える
6

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

ReferenceError: Base64 が定義されていません

于 2014-07-10T18:39:45.313 に答える
2

あなたが持っている場合

ReferenceError: Base64 が定義されていません

ここにファイルをアップロードすると、次のようなものになります。

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)

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

于 2019-03-28T10:01:23.730 に答える
0

まず、画像をロードし、データを変換してから、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'));
    });
}
于 2016-07-27T11:09:29.500 に答える
0

TypeScript では、次のことができます。

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

上記の関数を使用して、image オブジェクトを取得します。次に、以下を pdf ファイルに追加します。

pdf.addImage(getImage(url), 'png', x, y, imagewidth, imageheight);

プレーンな JavaScript では、関数は次のようになります。

function (imagePath) {
        var defer = this.q.defer();
        var img = new Image();
        img.src = imagePath;
        img.addEventListener('load', function () {
            defer.resolve(img);
        });
        return defer.promise;
    };
于 2016-06-10T02:42:17.157 に答える