web-dev-qa-db-ger.com

Fügen Sie ein Bild im PDF-Format mit jspdf hinzu

Ich verwende jspdf, um ein Bild in ein PDF-Format zu konvertieren.

Ich habe das Bild mit base64encode in einen URI konvertiert. Das Problem ist jedoch, dass in der Konsole keine Fehler oder Warnungen angezeigt werden. 

Ein PDF wird mit dem Text "Hello World" generiert, aber es wird kein Bild hinzugefügt.

Hier ist mein Code.

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

    }
13
Navya

Ich bin mir jedoch nicht sicher, dass das Bild möglicherweise nicht hinzugefügt wird, weil Sie die Ausgabe erstellen, bevor Sie sie hinzufügen. Versuchen:

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

Sie haben Base64 definiert? Wenn Sie nicht definiert sind, tritt dieser Fehler auf:

ReferenceError: Base64 ist nicht definiert

7
annelorayne

vielleicht etwas spät, aber ich komme kürzlich zu dieser Situation und habe eine einfache Lösung gefunden, es werden 2 Funktionen benötigt. 

  1. laden Sie das Bild.

    function getImgFromUrl(logo_url, callback) {
        var img = new Image();
        img.src = logo_url;
        img.onload = function () {
            callback(img);
        };
    } 
    
  2. rufen Sie im Onload-Ereignis im ersten Schritt einen Rückruf auf, um das Jspdf-Dokument zu verwenden.

    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. verwenden Sie die oben genannten Funktionen.

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

Sie müssen keine zusätzliche base64-Bibliothek hinzufügen. Einfache 5-Linien-Lösung -  

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");
3
Abhishek Sinha

Ich finde es nützlich.

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

Ich hatte das gleiche Problem, wobei Base64 nicht definiert wurde. Ich ging zu einem Online-Encoder und speicherte die Ausgabe dann in einer Variablen. Dies ist wahrscheinlich nicht ideal für viele Bilder, aber für meine Bedürfnisse war es ausreichend. 

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

Der obige Code funktionierte nicht für mich ... Ich fand eine neue Lösung:

 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";
2
punitha puni

Das funktionierte für mich in Angular 2:

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

jsPDF Version 1.5.3

Das Verzeichnis assets befindet sich im Verzeichnis src des Angular-Projektstammverzeichnisses

1
acn

Zuerst müssen Sie das Bild laden, Daten konvertieren und dann an jspdf übergeben (in 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;
        } 

verwenden Sie die obige Funktion, um ein Bild zu erstellen.

0
Hongyang

wenn Sie haben

ReferenceError: Base64 ist nicht definiert

sie können Ihre Datei hochladen hier Sie haben etwas wie:

data: image/jpeg; base64,/veryLongBase64Encode ....

auf deinem js mache:

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

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

Kann Beispiel sehen hier

0
Ibrahima Timera