Ajouter une image dans le pdf à l'aide de jspdf

Je suis en utilisant jspdf pour convertir une image en un fichier PDF.

J'ai converti l'image en URI à l'aide de base64encode. Mais le problème est qu'il n'y a pas d'erreurs ou d'avertissements affichés dans la console.

Un fichier PDF est généré avec le texte Hello World sur elle, mais aucune image n'est ajouté à lui.

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

    }
  • Quelle est la question ?
  • Un sauvage imagine qu'il ou elle veut pour l'img pour afficher le pdf
  • Un sauvage guess /:) je pense que la question était de savoir avant de faire une modification ou quelque chose comme ça
InformationsquelleAutor Navya | 2013-09-28
  1. 14

    Si je ne suis pas sûr, l'image peut ne pas être ajoutée parce que vous créez la sortie avant de l'ajouter. Essayez:

    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');
}
    • Ce sont tous les paramètres de la addImage fonction?
    • Il a été tout à l'heure, mais si je me souviens bien c'est: addImage(image, format, xPosition, yPosition, largeur, hauteur). J'espère que cela aide!
    • Il est addImage(imageData, format, x, y, width, height, alias, compression, rotation). Lire rawgit.com/MrRio/jsPDF/master/docs/module-addImage.html
    InformationsquelleAutor Leon Hooijer
  2. 9

    peut-être un peu de retard, mais je viens à cette situation récemment et a trouvé 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. dans l'événement onload sur la première étape, faire un rappel à l'utilisation de la 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. utiliser les fonctions ci-dessus.

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

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

    ReferenceError: Base64 n'est pas défini

    InformationsquelleAutor annelorayne
  4. 7

    Pas nécessaire d'ajouter des supplémentaires base64 de la bibliothèque. Simple 5 de la ligne de solution - 

    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");
    • Où path.resolve() vient d'où?
    • chemin d'accès.résoudre est Node JS choses. Fondamentalement, ça détermine le chemin d'accès correct par rapport à votre fichier. Si vous ne voulez pas l'utiliser, vous pouvez fournir le fichier source (/something/something/myfile.jpg) au lieu d'un chemin.resolve()
    • Vous êtes en train de charger un " jpg " fichier, mais vous êtes le définir comme 'png' dans doc.addImage
    InformationsquelleAutor Abhishek Sinha
  5. 4

    Le code ci-dessus n'a pas travaillé pour moi.
    J'ai trouvé la 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";
    InformationsquelleAutor punitha puni
  6. 4

    Cela a fonctionné pour moi dans Angulaire 2:

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

    jsPDF version 1.5.3

    actifs répertoire est en src répertoire de l'Angulaire de la racine du projet

    InformationsquelleAutor acn
  7. 3

    Que je trouve très 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/

    InformationsquelleAutor Saboor Awan
  8. 2

    J'ai eu le même problème avec Base64 n'est pas définie. Je suis allé à un encodeur en ligne et enregistrer le résultat dans une variable. Ce n'est probablement pas idéal pour de nombreuses images, mais pour mes besoins, il a été 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');
}
    • Vous avez de l'image/png mais ajouter en tant que jpg. Qui n'a pas son droit
    InformationsquelleAutor MrGood
  9. 0
    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;
        }

    utiliser la fonction ci-dessus pour getimage objet.
    puis les suivants à ajouter au fichier pdf
    pdf.addImage(getImage(url), 'png', x, y, imagewidth, imageheight);

    • c'est un tapuscrit code
    • javascript pour obtenir de l'image, c'est comme cela. fonction (imagePath) { var reporter = ce.q.reporter(); var img = new Image(); img.src = imagePath; img.la méthode addEventListener('load', function () { reporter.résoudre(img); }); return reporter.promesse; };
    InformationsquelleAutor Hongyang
  10. 0

    Vous devez d'abord charger l'image, convertir les données, et ensuite passer à jspdf (en caractères d'imprimerie):

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

    si vous avez

    ReferenceError: Base64 n'est pas défini

    vous pouvez télécharger votre fichier ici, vous aurez quelque chose comme :

    de données:image/jpeg;base64,/veryLongBase64Encode....

    sur votre js n' : 

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

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

    Pouvez voir l'exemple ici

    InformationsquelleAutor Ibrahima Timera
  12. -1
    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;
            };
    InformationsquelleAutor Hongyang