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");
}
};
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");
}
};
3 Answers
Reset to default 2As 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
}
?>