javascript - How to reduce the file size created by JSPDF?

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

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

Share Improve this question edited Jul 24, 2015 at 23:09 Daniel 3871 gold badge7 silver badges17 bronze badges asked Jul 22, 2015 at 20:12 user1576748 6833 gold badges15 silver badges28 bronze badges

Add a ment |

3 Answers 3

Sorted by: Reset to default 2

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 // pression 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 pression 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./eD9pJBy.jpg"; // 625x469
// image.src = "http://i.imgur./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!

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

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

发布者：admin，转转请注明出处：http://www.yc00.com/questions/1742319942a4421605.html

javascript - How to reduce the file size created by JSPDF? - Stack Overflow

3 Answers 3

发表回复

评论列表（0条）

联系我们

400-800-8888

javascript - How to reduce the file size created by JSPDF? - Stack Overflow

3 Answers 3

相关推荐