jsPDF

Question

我正在使用 jsPDF 从 canvas 创建 PDF 文件。问题是，创建的文件太大。

我曾经从 canvas 获取数据到 PNG，然后将该 PNG 数据粘贴到 PDF 中。如果我以这种方式创建文件，它有 4.0MB

我发现了这个关于这个问题的问题：

我根据那里的答案重写了我的代码。所以现在我使用 JPEG 而不是 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');

但是文件仍然有 4.0MB，我为 'imgData' 设置的质量无关紧要。

有没有办法缩小尺寸？或者 4.0 MB 是我能得到的最小值？

Answer 1

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

我试过

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

运行良好，大小从 2.5Mb 减小到 111kb。

Answer 2

这对我有用，将大小从 13.5 MB 减小到 180 kb，但质量略有下降。

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

  });

}

jsPDF - 减少文件大小

jsPDF - reduce file size

javascript

html

canvas