Question

我正在使用jspdf.js从HTML 5画布创建pdf。但是，无论内容是什么以及画布大小有多大，生成的文件大小始终为32,874 KB，即使画布完全为空。为什么文件大小始终相同？ 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是什么，我从头开始重写。

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

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

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

我尝试改变质量而且没有用。我发现here如何解决这个问题。新代码：

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

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

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

<!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();

}

结果：

＆＃39;柠檬＆＃39;有一个1024 x 768画布，但它是一个较小的图像：

＆＃39;女孩＆＃39;也有一个1024 x 768的画布，但图像更大，并填充整个区域：

这是压缩柠檬＆＃39;版本：

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

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=<?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创建的文件大小？

3 个答案: