How to reduce the file size created by JSPDF?

Question

I'm using jspdf.js to create pdf from HTML 5 canvas. However, regardless of what the contents are and how big the canvas size is, the generated file size is always 32,874 KB, even when the canvas is completey empty. Why the file size is always the same? jsPDF version is 1.1.135. My code is like this:

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

UPDATE: Full code:

  $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");
      }
  };

score 2 · Accepted Answer · edited May 23 '17 at 12:10

As I wasn't even aware of what Fabric.js was, I'm rewriting this from scratch.

First of all, changing the canvas size should work there. It is working on my example, test it if you can (I will post it below).

I believe that this line of code, wasn't working:

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

I tried changing the quality and it didn't work. I found here how to fix that. The new code:

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

So, before that, changing the image size, or any element for that matter, wouldn't change the final .PDF size, because it was probably being saved with no compression at all.

Here's my updated sample (try different canvas sizes, if possible):

<!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>

Here's the fabricPdf.js file:

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

}

The result:

'Lemon' had a 1024 x 768 canvas, but it is a smaller image:

'Girl' had a 1024 x 768 canvas as well, but the image was larger and filled the entire area:

This is the 'Compressed Lemon' version:

I think it's working now! Please try it out!

That's weird. In my case, even when the canvas is completely empty, the generated file size is always the same. I have no idea what's going on. — user1576748, Jul 23 '15 at 17:11
Would you mind posting your full code, or maybe a SSCCE version of it? Did you try my version? — Daniel, Jul 23 '15 at 17:22
I'm using kitchensink fabric.js. The full code is added above. — user1576748, Jul 24 '15 at 17:59
@user1576748 I've updated my answer based on your new information. — Daniel, Jul 27 '15 at 18:04
Great, thanks. I end up using 0.9 for best printing result. All I changed only the imgData variable. — user1576748, Jul 27 '15 at 19:47

score 1 · Answer 2 · answered Jul 22 '15 at 21:13

1

You are specifying a quality of 1.0 for your jpeg. Reduce that number to reduce the quality and image file size.

answered Jul 22 '15 at 21:13

samlewis

3,950
27
27

First, I need 1.0 for high resolution printing. Second, even when the canvas is completely empty, the generated file size is the same. – user1576748 Jul 23 '15 at 17:13

score 0 · Answer 3 · answered Oct 01 '15 at 07:39

This works fine in reducing the pdf size and also clarity. But in my case i have a foreach loop which generates images dynamically and i am trying to add the images into pdf here. If i add quality here i am not getting all my images.

Let us suppose if it generates 500 images, previously i used to get 500 type of images but now i am getting a single image 500 times.

Here is the code:

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 
    }
     ?>

How to reduce the file size created by JSPDF?

3 Answers3

Linked