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

    }

A wild guess would be that he or she wishes for the img to show on the pdf — Brainmaniac, Sep 11 '18 at 07:02
@Brainmaniac A wild guess /:) I think the question was before an edit or something like that — ehab, Jul 11 '19 at 15:57

score 44 · Answer 1 · answered Jan 02 '19 at 12:32

44

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

answered Jan 02 '19 at 12:32

atik

798
10
18

This worked for me. Until I add 'png' to addImage, it didn' work. – Rhokai Jul 27 '20 at 07:13
2

Didn't work for me either whilst specifying the extension. handler: "Error: Incomplete or corrupt PNG file" – PatricNox Sep 03 '20 at 11:33
This worked for me when setting the src to a base64 encoded image. – Brummy Nov 13 '22 at 15:06

score 24 · Answer 2 · answered Oct 14 '13 at 14:13

24

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

answered Oct 14 '13 at 14:13

Leon Hooijer

584
3
16

1

What are all the parameters for the addImage function? – Grez.Kev Apr 28 '17 at 21:03
3

@Grez.Kev It has been a while ago, but if I remember correctly it is: addImage(image, format, xPosition, yPosition, width, height). I hope this helps! – Leon Hooijer May 01 '17 at 06:54
5

It is `addImage(imageData, format, x, y, width, height, alias, compression, rotation)`. Read https://rawgit.com/MrRio/jsPDF/master/docs/module-addImage.html – Joel G Mathew Nov 12 '18 at 19:02
`Base64.encode('filename.jpeg')` no encode the image, this way will only do for the file name?! – Ivan Ferrer Feb 14 '20 at 19:48
can we make height and width 100%, I mean can we make an image fit according to available space in pdf – Lokesh Thakur Sep 14 '21 at 11:28

score 16 · Answer 3 · edited Mar 01 '18 at 21:30

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

what is the custom format: custom? I am getting error Uncaught ReferenceError: custom is not defined — Naren Verma, Jun 02 '23 at 07:32

Abhishek Sinha · Answer 4 · 2019-12-23T12:34:32.223

16

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

edited Dec 23 '19 at 12:34

answered Aug 02 '18 at 11:08

Abhishek Sinha

5,095
1
15
14

4

path.resolve is Node JS stuff. It basically figures out the correct file path relative to your file. If you don't want to use it you can provide file source (/something/something/myfile.jpg) instead of path.resolve() – Abhishek Sinha Mar 26 '19 at 06:35
1

You're loading a 'jpg' file, but you're setting it as 'png' in `doc.addImage` – Paul Verschoor Jun 14 '19 at 18:13
1

@MustkeemK You can go through this link: https://artskydj.github.io/jsPDF/docs/module-addImage.html – Abhishek Sinha Dec 23 '19 at 12:38
in latter versions, addImage expects 4 arguments. – PatricNox Sep 03 '20 at 11:35
instead of doc.save("new.pdf"); can we use doc.open("new.pdf") to open that pdf file in new tab/window. ? – shavy Apr 15 '21 at 18:12

score 6 · Answer 5 · answered Jul 10 '14 at 18:39

6

You defined Base64? If you not defined, occurs this error:

ReferenceError: Base64 is not defined

answered Jul 10 '14 at 18:39

annelorayne

1,404
13
10

You can use an online converter and insert string into your code. https://www.base64-image.de/ – David D. Oct 17 '18 at 08:41

score 4 · Answer 6 · edited Sep 08 '15 at 13:06

4

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/

edited Sep 08 '15 at 13:06

Omri Aharon

16,959
5
40
58

answered Nov 05 '14 at 10:23

Saboor Awan

1,567
4
24
37

score 4 · Answer 7 · edited May 13 '18 at 12:00

4

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

edited May 13 '18 at 12:00

Luca Di Liello

1,486
2
17
34

answered Mar 26 '18 at 12:10

punitha puni

41
2

score 2 · Answer 8 · answered Feb 25 '16 at 18:55

2

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

answered Feb 25 '16 at 18:55

MrGood

545
5
21

2

You have image/png but add as jpg. That does not sound right – mplungjan Jan 09 '17 at 22:03
@mplungjan `data:image/png` is just typo error, with `data:image/jpeg` everything is alright – Oda Mitsuru Oct 22 '19 at 09:20

score 2 · Answer 9 · answered Mar 28 '19 at 10:01

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

score 0 · Answer 10 · answered Jul 27 '16 at 11:09

First you need to load the image, convert data, and then pass to jspdf (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'));
    });
}

score 0 · Answer 11 · answered Feb 14 '20 at 20:00

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

score -1 · Answer 12 · edited Nov 07 '19 at 00:11

In TypeScript, you can do:

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

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

Add image in pdf using jspdf

12 Answers12

Linked