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:

var image = myCanvas.getContext('2d').getImageData(0,0,400,300),
doc = new pdf();
doc.setProperties({
    title: fileName,
    author: 'VirtuaLab®',
    creator: 'pdf.js'
});
doc.addPage();
data = doc.output();

But I haven't found anything about inserting images on PDF.js pages.

Maybe doc.image() or doc.addImage?

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:

var image = myCanvas.getContext('2d').getImageData(0,0,400,300),
doc = new pdf();
doc.setProperties({
    title: fileName,
    author: 'VirtuaLab®',
    creator: 'pdf.js'
});
doc.addPage();
data = doc.output();

But I haven't found anything about inserting images on PDF.js pages.

Maybe doc.image() or doc.addImage?

• javascript
• pdf
• canvas
• pdf-generation
• pdf.js

• The most mon use case is inserting an image as stamp annotation via a custom appearance stream, that way you don't need to edit the actual pdf page contents. Here's more about that: pspdfkit./blog/2018/what-are-appearance-streams – steipete Commented Aug 14, 2018 at 7:19

3 Answers 3

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-mercial 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.

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.

this here working. pdf.js and html2canvas

codepen

window.jsPDF = window.jspdf.jsPDF;
var specialElementHandlers = {
    '#editor': function (element, renderer) {
        return true;
    }
};
function generatePdf(){
var doc = new jsPDF();

// Source HTMLElement or a string containing HTML.
var elementHTML = document.querySelector("#content");

doc.html(elementHTML, {
    callback: function(doc) {
        // Save the PDF
        doc.save('document-html.pdf');
    },
    'elementHandlers': specialElementHandlers,
    margin: [0, 0, 0, 0],
    autoPaging: 'text',
    x: 0,
    y: 0,
    width: 190, // Target width in the PDF document
    windowWidth: 675 // Window width in CSS pixels
});

}