web-dev-qa-db-fra.com

Ajouter une image en pdf en utilisant jspdf

J'utilise jspdf pour convertir une image en PDF.

J'ai converti l'image en un URI en utilisant base64encode. Mais le problème est qu’aucune erreur ni aucun avertissement ne s’affiche dans la console. 

Un PDF est généré avec le texte Hello World mais aucune image n'y est ajoutée.

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

    }
javascriptjqueryimagejspdf
13
Navya

Bien que je ne sois pas sûr, l’image pourrait ne pas être ajoutée car vous créez la sortie avant de l’ajouter. Essayer:

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

Vous avez défini Base64? Si vous ne définissez pas, se produit cette erreur:

ReferenceError: Base64 n'est pas défini

7
annelorayne

peut-être un peu tard, mais je viens à cette situation récemment et trouve une solution simple, 2 fonctions sont nécessaires. 

  1. charger l'image.

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

  2. lors de l’événement onload à la première étape, faites un rappel pour utiliser le doc 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. utilisez les fonctions ci-dessus.

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

Pas besoin d'ajouter de bibliothèque supplémentaire base64. Solution simple à 5 lignes -  

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

Je trouve ça utile.

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

J'ai eu le même problème avec Base64 non défini. Je suis allé à un encodeur en ligne puis j'ai enregistré le résultat dans une variable. Ce n'est probablement pas idéal pour beaucoup d'images, mais pour mes besoins c'était suffisant. 

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

Le code ci-dessus n'a pas fonctionné pour moi ... J'ai trouvé une nouvelle solution:

 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

Cela a fonctionné pour moi dans Angular 2:

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

jsPDF version 1.5.3

assets le répertoire est dans src le répertoire de la racine du projet Angular

1
acn

Vous devez d’abord charger l’image, convertir les données, puis passer à jspdf (en 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;
        }

utilisez la fonction ci-dessus pour obtenir un objet image . puis ajoutez ce qui suit au fichier pdf pdf.addImage (getImage (url), 'png', x, y, largeur d'image, hauteur d'image);

0
Hongyang