PDF.js Inserting Images

Question

I\'ve started using PDF.js, an excelent work, by the way.

But now I want to insert an image (from a canvas element) on the pdf page. Here\'s my code:

Answer 1

If I understand your question correctly you want to use an <img> instead of a <canvas> with pdf.js.

So here is my fix for this problem, insert the returned image in a canvas as normal, give the canvas a display: none;.

Then use the .toDataURL() method of the canvas element to get a src for your img.

var canvas = document.getElementById("myCanves");
var img = document.getElementById("myImg");
img.src = canvas.toDataURL();

I hope this helps.

Answer 2

Disclaimer: I work for Bytescout

Unfortunately PDF.js not working with images and that is why we developed PDF Generator SDK for Javascript (free for non-commercial use) where you can add image (from url or canvas) like this:

// load image from local file
pdf.imageLoadFromUrl('image1.jpg');
// place this mage at given X, Y coordinates on the page
pdf.imagePlace(20, 40);

Important to say that you can face limitation on image size as BytescoutPDF.js may consumes memory to process large image (this issue is caused by the memory limitations for javascript).

However the script should work fine in case you just need to insert logo image or small picture into generated pdf.

UPDATE: the latest version of jsPDF (not to be confused with PDF.js) seems to work with images, see the sample on examples page.