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

Question

我正在使用 jspdf.js 从 HTML 5 canvas 创建 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

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

Answer 2

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

首先，更改 canvas 大小应该在那里起作用。它正在处理我的示例，如果可以的话，请对其进行测试（我将在下面 post 它）。

我认为这行代码不起作用：

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

我试过改变画质，但没用。我找到 here 如何解决这个问题。新代码：

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

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

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

<!DOCTYPE html>
<html>
<body>
<canvas id="canvas" width="1024" height="768"></canvas>

<script src='jquery-2.1.4.js'></script>
<script src='jspdf.min.js'></script>
<script src='fabric.min.js'></script>
<script src='fabricPdf.js'></script>

</body>
</html>

这是 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，但图像更大并填满了整个区域：

这是 'Compressed Lemon' 版本：

我认为它现在起作用了！请尝试一下！

Answer 3

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

假设它生成了 500 张图像，以前我曾经得到 500 种类型的图像，但现在我得到了 500 次单张图像。

代码如下：

foreach($set as $item)
    {
        ?>
        getImageFromUrl('http://localhost:800/prod/chart.php?period=<?php echo $timeperiod; ?>&stime=<?php echo $startingtime; ?>&itemids=<?php echo $item->itemid; ?>&type=0&updateProfile=1&profileIdx=web.item.graph&width=1222&screenid=&curtime=1442486527893', function(imgData) {
            doc.text(x, y, '<?php echo $item->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');
    <?php 
    }
     ?>

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

How to reduce the file size created by JSPDF?

javascript

jquery

html5-canvas

fabricjs

jspdf