|
|
相关文章推荐
|
酷酷的紫菜 · 使用Ajax导出Excel_ajax导出ex ...· 1 年前 · |
|
|
逼格高的麦片 · 2021最详细微信聊天记录备份＆免费导出方案 ...· 1 年前 · |
|
|
阳刚的小狗 · spring boot ...· 2 年前 · |
|
|
奔跑的警车 · shell读取文件前4个字节转换为16进制_ ...· 2 年前 · |
我使用jspdf在浏览器中创建PDF。我有多个以svg作为图表数据的图表。为了添加数据到pdf，我使用画布将svg转换为png，然后使用
canvas.toDataURL
方法转换Base64数据。在所有这些转换之后，jspdf创建的文件的大小是巨大的(大约50MB)。下面是图表数据和画布的div代码。
newdiv = document.createElement("div");
newdiv.className = "big_Con_graph big_Con_graph0";
newdiv.style.height = "0px";
newdiv.id = "big_Con_graph" + id;
下面是SVG图表加载的尺寸。
document.getElementById("big_Con_graph" + id).style.display = "block";
var big_chartReference = FusionCharts("big_myChartId"+id);
if(big_chartReference != null){
big_chartReference.dispose();
var big_width = "1088";
var big_height = "604";下面是转换上述图形SVG数据并添加到PDF的代码。
var elem_graph = $($('.big_Con_graph,big_Con_graph0')[count]).clone(true);
svgString = $(elem_graph).find("span").html();
var img = document.createElement('img');
var DOMURL = self.URL || self.webkitURL || self;
var svg = new Blob([svgString], {type: "image/svg+xml;charset=utf-8"});
var url = DOMURL.createObjectURL(svg);
img.onload = pdfAfterImageLoad(img,pdf,imgLoadSequence,DOMURL,totalReports,reportName);
img.src = url;下面是PDFAfterImageLoad函数的代码：
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
ctx.drawImage(img, 0, 0);
var png = canvas.toDataURL("image/png");
pdf.addImage(png, 'PNG', leftmargin, 120, 485, 270);我使用的是png，所以imagequality参数不能使用。
有人能帮我减小文件大小吗？
6 个回答
高票数
最新
Community
修改于2017-05-23 18:30
得票数
0
你试过
canvg
吗？它不太可能会减少文件大小，但至少你可以尝试一下。
查看 this reply 中的代码段。
hkm93
修改于2019-01-10 22:08
得票数
74
您需要在您生成的PDF中压缩图像。尝试使用Deflate.js和adler32cs.js，并在正在使用的jsPDF和addImage函数中使用compress参数。例如：
var doc = new jsPDF('p', 'pt','a4',true);确保将最后一个参数设置为'true‘请参阅： https://github.com/MrRio/jsPDF/blob/ddbfc0f0250ca908f8061a72fa057116b7613e78/jspdf.js#L146
通过它，您可以清楚地看到最后一个参数是用于启用压缩的。
还可以使用：
pdf.addImage(png, 'PNG', leftmargin, 120, 485, 270,'','FAST');而不是
pdf.addImage(png, 'PNG', leftmargin, 120, 485, 270);你可以在无、快、中、慢中选择最适合你的。
Andrew Hudik
回答于2016-12-10 05:13
得票数
19
如果将多个图像添加到一个文档，请使用
pdf.addImage(png, 'PNG', leftmargin, 120, 485, 270, undefined,'FAST');注释
pdf.addImage(png, 'PNG', leftmargin, 120, 485, 270,'','FAST');否则，第一个图像将替换所有其他图像。
mikemaal
回答于2018-05-08 20:16
得票数
1
在我的例子中，不能使用压缩参数。因此，我使用以下函数自己调整了当前图像的大小：
function resizeBase64Img(base64, width, height) {
var canvas = document.createElement("canvas");
canvas.width = width;
canvas.height = height;
var context = canvas.getContext("2d");
var deferred = $.Deferred();
$("<img/>").attr("src", "data:image/gif;base64," + base64).load(function() {
context.scale(width/this.width, height/this.height);
context.drawImage(this, 0, 0);
deferred.resolve($("<img/>").attr("src", canvas.toDataURL()));
return deferred.promise();
}并按如下方式命名：
//select my image in base64
推荐文章