我正在使用 jspdf.js 从 HTML 5 Canvas 创建 pdf。但是，无论内容是什么以及 Canvas 大小有多大，生成的文件大小始终为 32,874 KB，即使 Canvas 完全为空也是如此。为什么文件大小总是相同？ 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");
}
};
最佳答案
由于我什至不知道 Fabric.js 是什么，所以我从头开始重写它。
首先，更改 Canvas 大小应该可以实现。它正在我的示例中运行，如果可以的话请测试一下(我将在下面发布)。
我相信这行代码不起作用:
var imgData = canvas.toDataURL("image/jpeg", 1.0);
我尝试更改质量，但没有成功。我发现here如何解决这个问题。新代码:
var imgData = canvas.toDataURL({
format: 'jpeg',
quality: 0.9 // compression works now!
});
因此，在此之前，更改图像大小或任何与此相关的元素都不会更改最终的 .PDF 大小，因为它可能是在完全没有压缩的情况下保存的。
这是我更新的示例(如果可能，尝试不同的 Canvas 尺寸):
<!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();
}
结果:
“柠檬”的 Canvas 尺寸为 1024 x 768，但图像较小:
“女孩”也有 1024 x 768 Canvas ，但图像更大并填满了整个区域:
这是“压缩柠檬”版本:
我认为它现在可以工作了!请尝试一下!
关于javascript - 如何减小 JSPDF 创建的文件大小？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31573097/