如何減少JSPDF創建的文件大小？

Question

我正在使用jspdf.js從HTML 5 canvas創建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不知道Fabric.js是什么，因此我正在從頭開始重寫它。

首先，更改畫布大小應該在那里工作。 它正在處理我的示例，請對其進行測試（我將在下面發布）。

我認為這行代碼行不通：

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

我嘗試更改質量，但沒有效果。 我在這里找到了解決方法。 新代碼：

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

}

結果：

“檸檬”有一個1024 x 768的畫布，但是它是一個較小的圖像：

“女孩”也有一個1024 x 768的畫布，但是圖像更大，並充滿了整個區域：

這是“壓縮檸檬”版本：

我認為它現在正在工作！ 請嘗試一下！

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 個解決方案

解決方案1
2 已采納 2015-07-22 23:14:12

解決方案2
1 2015-07-22 21:13:56

解決方案3
0 2015-10-01 07:39:52

如何減少JSPDF創建的文件大小？

問題描述

3 個解決方案

解決方案1 2 已采納 2015-07-22 23:14:12

解決方案2 1 2015-07-22 21:13:56

解決方案3 0 2015-10-01 07:39:52

解決方案1
2 已采納 2015-07-22 23:14:12

解決方案2
1 2015-07-22 21:13:56

解決方案3
0 2015-10-01 07:39:52