html2canvas($("#Element"), {
onrendered: function(canvasq) {
var w=window.open();
w.document.write("<h3 style='text-align:center;'>"+ReportTitle+"</h3>");
w.document.write("<img width='100%' height:'90%' src='"+canvasq.toDataURL()+"' />");
w.print();
}
});
我想提高 canvasq.toDataURL() 的质量。 有什么方法吗?因为返回的数据质量低。
最佳答案
简答:
将图片大小设置为其原始大小的 1/3。
长答案:
您网站上的图像打印质量为 72dpi。
当您尝试打印页面时,所有文本都呈现为高质量矢量(通常为 ~300dpi,具体取决于您的打印设置)。
因此,如果您需要打印出高质量的图像,则需要将其至少缩小到原始尺寸的三分之一。
当您使用 html2canvas 库生成图像时,您必须在渲染之前将所有 CSS 大小设置为 300%。
考虑一下:
var ReportTitle = 'Hello world!'; // For demonstration
var bigCanvas = $("<div>").appendTo('body'); // This will be the 3x sized canvas we're going to render
var scaledElement = $("#Element").clone()
.css({
'transform': 'scale(3,3)',
'transform-origin': '0 0'
})
.appendTo(bigCanvas);
var oldWidth = scaledElement.width();
var oldHeight = scaledElement.height();
var newWidth = oldWidth * 3;
var newHeight = oldHeight * 3;
bigCanvas.css({
'width': newWidth,
'height': newHeight
})
html2canvas(bigCanvas, {
onrendered: function(canvasq) {
var w=window.open();
w.document.write("<h3 style='text-align:center;'>"+ReportTitle+"</h3>");
w.document.write("<img width='"+oldWidth+"' height='"+oldHeight+"' src='"+canvasq.toDataURL()+"' />");
w.print();
bigCanvas.remove()
}
});
关于javascript - 使用 html2canvas 设置 Png 的质量,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18316065/