Html 使用 html2canvas 设置 Png 的质量
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18316065/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Set Quality of Png with html2canvas
提问by user2622044
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();
}
});
I wanna increase quality of canvasq.toDataURL(). Is there any Method ? Because Returned data low quality.
我想提高 canvasq.toDataURL() 的质量。有什么方法吗？因为返回的数据质量低。
回答by jehna1
Short answer:
Set your image size to 1/3 of it's original size.
简短回答：
将图像大小设置为原始大小的 1/3。
Long answer:
Print quality of images on your website is 72dpi.
长答案：
您网站上图像的打印质量为 72dpi。
When you try print your page, all texts are rendered as high quality vectors (normally ~300dpi, depending on your print settings).
当您尝试打印页面时，所有文本都将呈现为高质量矢量（通常约为 300dpi，具体取决于您的打印设置）。
So if you need to print out a high-quality image, you'll need to scale it down at least to a third of it's original size.
因此，如果您需要打印出高质量的图像，则需要将其至少缩小到原始尺寸的三分之一。
An when you're using html2canvas library to produce the image, you'll have to set all the CSS sizes to 300% before doing the render.
当您使用 html2canvas 库生成图像时，您必须在渲染之前将所有 CSS 大小设置为 300%。
So consider this:
所以考虑一下：
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()
}
});
回答by Alexander Ivashchenko
the approach with css scale is correct.
css scale 的方法是正确的。
first we need to scale up element, then in "html2canvas" callback scale it down.
首先我们需要放大元素，然后在“html2canvas”回调中缩小它。
var ELEMENT = jQuery("#ELEMENT");
//get element width and height
var w = ELEMENT.width();
var h = ELEMENT.height();
//scale up your element
ELEMENT.css({
'transform': 'scale(3)',
'-ms-transform': 'scale(3)',
'-webkit-transform': 'scale(3)' });
//run html2canvas
html2canvas(ELEMENT, {
onrendered: function(canvas) {
//scale back your element
ELEMENT.css({
'transform': '',
'-ms-transform': '',
'-webkit-transform': '' });
//your actions to canvas
var win = window.open();
win.document.write('<h3 style="text-align:center;">ttl</h3>');
win.document.write('<img width="100%" height:"90%" src="'+canvas.toDataURL()+'"/>');
win.print();
},
//set proper canvas width and height
width: w*3,
height: h*3
});
回答by Ricky sharma
you can use scale options in html2canvas.
您可以在 html2canvas 中使用缩放选项。
In the latest release, v1.0.0-alpha.1, you can use the scale option to increase the resolution (scale: 2 will double the resolution from the default 96dpi).
在最新版本 v1.0.0-alpha.1 中，您可以使用 scale 选项来增加分辨率（scale: 2 将使分辨率从默认的 96dpi 增加一倍）。
// Create a canvas with double-resolution.
html2canvas(element, {
scale: 2,
onrendered: myRenderFunction
});
