Add image in pdf using jspdf

Question

I am using jspdf to convert an image into a PDF   I have converted the image into a URI using base64encode  But the problem is that there are no errors or warnings shown in the console    A PDF is generated with the text Hello World on it but no image is added in it   Here is my 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

User · Answer

No need to add any extra base64 library  Simple 5 line solution -   var img   new Image    img src   path resolve  sample jpg     var doc   new jsPDF  p    mm    a3        optional parameters doc addImage img   JPEG   1  2   doc save  new pdf

User · Answer

Though I m not sure  the image might not be added because you create the output before you add it  Try   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

User · Answer

In TypeScript  you can do   private getImage imagePath   ng IPromise lt any gt        var defer   this q defer lt any gt         var img   new Image        img src   imagePath      img addEventListener  load      gt          defer resolve img                 return defer promise       Use the above function to getimage object  Then the following to add to pdf file   pdf addImage getImage url    png   x  y  imagewidth  imageheight     In plain JavaScript  the function looks 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

User · Answer

First you need to load the image  convert data  and then pass to jspdf  in typescript    loadImage imagePath   ng IPromise lt any gt        var defer   this q defer lt any gt         var img   new Image        img src   imagePath      img addEventListener  load      gt               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    gt            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

User · Answer

maybe a little bit late  but I come to this situation recently and found a simple solution  2 functions are needed     load the image   function getImgFromUrl logo url  callback        var img   new Image        img src   logo url      img onload   function              callback img              in onload event on first step  make a callback to use the 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     use the above functions   var logo url     images logo jpg   getImgFromUrl logo url  function  img        generatePDF img

User · Answer

I find it useful   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

User · Answer

The above code not worked for me  I found new 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

User · Answer

This worked for me 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  assets directory is in src directory of the Angular project root

User · Answer

You defined Base64  If you not defined  occurs this error      ReferenceError  Base64 is not defined

User · Answer

if you have      ReferenceError  Base64 is not defined   you can upload your file here you will have something as        data image jpeg base64  veryLongBase64Encode       on your js do     var imgData    data image jpeg base64  veryLongBase64Encode      var doc   new jsPDF    doc setFontSize 40  doc addImage imgData   JPEG   15  40  180  160    Can see example here

User · Answer

For result in base64  before convert to canvas   var getBase64ImageUrl   function url  callback  mine                         var img   new Image                         url   url replace  http                                 img setAttribute  crossOrigin    anonymous                         img onload   function                              var canvas   document createElement  canvas                            canvas width  this width                          canvas height  this height                           var ctx   canvas getContext  2d                            ctx drawImage this  0  0                            var dataURL   canvas toDataURL mine     image jpeg                             callback dataURL                                              img src   url                       img onerror   function                             console log  on error                           callback                                                getBase64ImageUrl  Koala jpeg   function img              img is a base64encode result            return img            console log img              var doc   new jsPDF                  doc setFontSize 40                 doc text 30  20   Hello world                   doc output  datauri                  doc addImage img   JPEG   15  40  180  160

User · Answer

I had the same issue with Base64 not being defined  I went to an online encoder and then saved the output into a variable  This probably is not ideal for many images  but for my needs it was sufficient    function makePDF        var doc   new jsPDF        var image    data image png base64 iVBORw0KGgoAA         doc addImage image   JPEG   15  40  180  160       doc save  title

[javascript] Add image in pdf using jspdf

Examples related to javascript

Examples related to jquery

Examples related to image

Examples related to jspdf