Add pdf image using jspdf

Question

I use jspdf to convert image to pdf.

I converted the image to a URI using base64encode. But the problem is that there are no errors or warnings in the console.

A PDF is created with the text Hello World, but no image is added to 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); } 

Answer 1

Although I'm not sure, the image cannot be added because you create the output before adding 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'); } 

Answer 2

Have you identified Base64? If you have not identified, this error will occur:

ReferenceError: Base64 not defined

Answer 3

maybe a little late, but I came to this situation recently and found a simple solution, 2 functions are needed.

• Upload image.

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

• in the onload event in the first step, make a callback to use the jspdf document.

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

Answer 4

I find this 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.imtqy.com/jsPDF/

Answer 5

No need to add an additional base64 library. A 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, 'PNG', 1, 2); doc.save("new.pdf"); 

Answer 6

I had the same problem when Base64 was not defined. I went to an online encoder and then saved the output in a variable. This is probably not ideal for many images, but that was enough for my needs.

 function makePDF(){ var doc = new jsPDF(); var image = "data:image/png;base64,iVBORw0KGgoAA.."; doc.addImage(image, 'JPEG', 15, 40, 180, 160); doc.save('title'); } 

Answer 7

The above code does not work for me. I found a 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"; 

Answer 8

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

The assets directory is in the src directory of the Angular project root

Answer 9

 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 function above for the getimage object. then add the pdf.addImage file (getImage (url), 'png', x, y, imagewidth, imageheight) to the pdf file;

Answer 10

First you need to download the image, convert the data, and then go 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')); }); } 

Answer 11

if you have

ReferenceError: Base64 not defined

You can upload your file here, you will have something like:

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) 

You can see an example here

Answer 12

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