如何减少JSPDF创建的文件大小？

我正在使用jspdf.js从HTML 5canvas创建pdf。 但是，无论内容是什么以及canvas大小有多大，生成的文件大小始终为32,874 KB，即使canvas完全为空。 为什么文件大小始终相同？ jsPDF版本是1.1.135。 我的代码是这样的：

var imgData = canvas.toDataURL("image/jpeg", 1.0); var width = $("canvas").attr('width'); var height = $("canvas").attr('height'); var pdf = new jsPDF('p', 'pt', [width,height]); pdf.addImage(imgData, 'JPEG', 0, 0, width, height); pdf.save("download.pdf"); 

更新：完整代码：

  $scope.rasterizePDF = function() { if (!fabric.Canvas.supports('toDataURL')) { alert('This browser doesn\'t provide means to serialize canvas to an image'); } else { var imgData = canvas.toDataURL("image/jpeg", 1.0); var width = $("canvas").attr('width'); var height = $("canvas").attr('height'); var pdf = new jsPDF('p', 'pt', [width,height]); pdf.addImage(imgData, 'JPEG', 0, 0, width, height); pdf.save("download.pdf"); } }; 

Answer 1

因为我甚至不知道Fabric.js是什么，所以我从头开始重写。

首先，改变canvas大小应该在那里工作。 它正在研究我的例子，如果你能测试它（我将在下面发布）。

我相信这行代码不起作用：

 var imgData = canvas.toDataURL("image/jpeg", 1.0); 

我尝试改变质量但它没有用。 我在这里找到了如何解决这个问题。 新代码：

 var imgData = canvas.toDataURL({ format: 'jpeg', quality: 0.9 // compression works now! }); 

因此，在此之前，更改图像大小或任何元素都不会改变最终的.PDF大小，因为它可能根本没有压缩而保存。

这是我的更新样本（如果可能，尝试不同的canvas大小）：

这是fabricPdf.js文件：

 function createPdf() { var imgData = canvas.toDataURL({ format: 'jpeg', quality: 0.2 }); var width = $("canvas").attr('width'); var height = $("canvas").attr('height'); var pdf = new jsPDF('p', 'pt', [width,height]); pdf.addImage(imgData, 'JPEG', 0, 0, width, height); pdf.save("download.pdf"); } var canvas = new fabric.Canvas('canvas'); var image = new Image(); image.setAttribute('crossOrigin', 'anonymous'); image.src = "http://i.imgur.com/eD9pJBy.jpg"; // 625x469 // image.src = "http://i.imgur.com/EDllPEW.jpg"; // 2816x2112 image.onload = function() { var fabricImage = new fabric.Image(image, { width: 625, height: 469, angle: 0, opacity: 1 }) canvas.add(fabricImage); createPdf(); } 

结果：

‘Lemon’有一个1024 x 768的canvas，但它是一个较小的图像：

‘Girl’也有一个1024 x 768的canvas，但是图像更大并且填满了整个区域：

这是’压缩柠檬’版本：

我认为它现在正在运作！ 请试一试！

Answer 2

您为jpeg指定了1.0的质量。 减少该数量以降低质量和图像文件大小。

Answer 3

这在减小pdf大小和清晰度方面效果很好。 但在我的情况下，我有一个foreach循环，动态生成图像，我试图在这里将图像添加到pdf。 如果我在这里添加质量，我没有得到我的所有图像。

让我们假设它是否生成500张图像，之前我曾经获得过500种图像，但现在我得到500张图像。

这是代码：

 foreach($set as $item) { ?> getImageFromUrl('http://localhost:800/prod/chart.php?period=&stime=&itemids=itemid; ?>&type=0&updateProfile=1&profileIdx=web.item.graph&width=1222&screenid=&curtime=1442486527893', function(imgData) { doc.text(x, y, 'host; echo ":"; echo $item->name; ?>'); y=y+15; doc.addImage(imgData, 'jpg', x, y, 170, 60); // this works fine generating 15mb file and 500 different images and if you change it to doc.addImage(imgData, 'jpg', x, y, 170, 60,0.9); it is generating single image 500 times. y=y+80; if(y>250) { doc.addPage(); y=15; } } ); doc.save('out.pdf');