jsPDF Tutorial to Compress Big Images to Fit to PDF Document Page in Browser Using Javascript Full Tutorial For Beginners



You need to compress the images in the PDF’s that you are generating. Try using Deflate.js and adler32cs.js and use the compress parameter in both jsPDF and addImage functions that you are using. For eg :

var doc = new jsPDF('p', 'pt','a4',true);

make sure you set the last parameter as ‘true’ refer to : https://github.com/MrRio/jsPDF/blob/ddbfc0f0250ca908f8061a72fa057116b7613e78/jspdf.js#L146

Go through it and you can clearly see that the last parameter is for enabling compression.

Also use :

pdf.addImage(png, 'PNG', leftmargin, 120, 485, 270,'','FAST');

instead of

pdf.addImage(png, 'PNG', leftmargin, 120, 485, 270);

you can choose between NONE, FAST, MEDIUM and SLOW, whichever suits you best.



If you add several images to one document, use

pdf.addImage(png, 'PNG', leftmargin, 120, 485, 270, undefined,'FAST');


pdf.addImage(png, 'PNG', leftmargin, 120, 485, 270,'','FAST');


Perfect. PDF size 90mb to 3mb with great quality.


pdf.addImage(png, 'PNG', 0, 0, 485, 270, undefined,'FAST');



In my case did not work with compress parameter. So, I resized the current image on my own with the following function:

function resizeBase64Img(base64, width, height) {
    var canvas = document.createElement("canvas");
    canvas.width = width;
    canvas.height = height;
    var context = canvas.getContext("2d");
    var deferred = $.Deferred();
    $("<img/>").attr("src", "data:image/gif;base64," + base64).load(function() {
        context.scale(width/this.width,  height/this.height);
        context.drawImage(this, , ); 
        deferred.resolve($("<img/>").attr("src", canvas.toDataURL()));               
    return deferred.promise();    

And call it as follows:

//select my image in base64
var imageStr64 = "/9j/4RiDRXhpZgAATU0AKgA...";
//resize image, add image and create the pdf
resizeBase64Img(imageStr64, 1000, 1000).then(function(newImg){
    doc.addImage($(newImg).attr('src'), 15, 90, 180,180);

You can play with ‘width’ and ‘height’ parameters in resizeBase64Img function in order to generate heavy pdf with better or worst image quality.

See also  URLBOX Library Example to Take Website Screenshots or Snapshots in Javascript,Node.js Full Project For Beginners


pdf.addImage({ imageData: canvas.toDataURL('image/jpeg', 0.6),format: 'JPEG', x: 2, y: 100, width: newImageWidth, height: newImageHeight});

Leave a Reply