CODEWITHSUNDEEP
javascripthtmlcanvasjspdf
matousc
matousc

Reputation: 3977

jsPDF - reduce file size

I am using jsPDF to create PDF files from canvas. Issue is, that the created files are too big.

I used to get data from canvas to PNG and after I pasted that PNG data into PDF. If I create file in this way, it has 4.0MB

I found this question about this problem: How to reduce the file size created by JSPDF?

I rewrite my code according the answer there. So now I am using JPEG instead of PNG:

var imgData = canvas.toDataURL({
    format: 'jpeg',
    quality: 0.2
});

var doc = new jsPDF('p', 'mm', "A4");
doc.addImage(imgData, 'JPEG', 10, 10, 190, 190);
doc.save('mandala.pdf');

But the files have still the 4.0MB and it does not matter what quality I set for 'imgData'.

Is there a way how to reduce the size? Or 4.0 MB is the smallest I can get?

Upvotes: 1

Views: 12903

Answers (2)

Jogesh Ravani
Jogesh Ravani

Reputation: 91

This worked for me reducing size from 13.5 MB to 180 kb with a little bit compromise in quality.

function genPDF() {

  html2canvas(document.querySelector(".page"), {scale: "2"}).then(canvas => {

    this.imgFile = canvas.toDataURL("image/jpeg", 0.3);
    var doc = new jsPDF('p', 'mm', 'a4', true);
    doc.addImage(this.imgFile, "JPEG", 5, 0, 210, 297, undefined,'FAST');
    doc.save('Test.pdf');

  });

}

Upvotes: 9

fayzaan
fayzaan

Reputation: 265

https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toDataURL

I tried with

canvas.toDataURL( 'image/jpeg', 1.0 );

works well, got size down to 111kb from 2.5Mb.

Upvotes: 3

Related Questions