Javascript 在 toDataURL 之前缩放图像 - html2canvas
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/28635199/
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
Scale image before toDataURL - html2canvas
提问by shaneparsons
Before you tell me this is a duplicate question, know that I've searched through everysingle similar question and noneof the answers in any of them are working for me.
在你告诉我这是一个重复的问题之前，要知道我已经搜索了每一个类似的问题，但没有一个答案对我有用。
Im using html2canvasto grab a snapshot of a div, and what I need to do is scale it up to 750x1050before saving it to a png via canvas.toDataURL().
我使用html2canvas来抓取一个 div 的快照，我需要做的是将它放大到750x1050，然后通过canvas.toDataURL().
The closest I got was with the following code.
我得到的最接近的是以下代码。
html2canvas(document.getElementById('div_id'), {
onrendered: function(canvas) {
var extra_canvas = document.createElement("canvas");
extra_canvas.setAttribute('width', 750);
extra_canvas.setAttribute('height', 1050);
var ctx = extra_canvas.getContext('2d');
ctx.drawImage(canvas, 0, 0, 750, 1050);
var dataURL = extra_canvas.toDataURL();
window.open(dataURL);
}
});
The image was sized properly but the text within the image was extremely poor quality, as if it resized it afterbecoming a png.
图像大小合适，但图像中的文本质量极差，好像它在变成 png后调整了大小。
Is it that I'm doing something wrong or can you just not scale up this way?
是我做错了什么，还是你不能以这种方式扩大规模？
Any and every suggestion/work-around will be greatly appreciated!
任何和每一个建议/解决方法都将不胜感激！
采纳答案by shaneparsons
For anyone else wondering how to get high-res print-worthy content from html: PhantomJSand wkhtmltopdf / wkhtmltoimageare great alternatives that handle these things better.
对于想知道如何从 html 获取高分辨率打印内容的其他人：PhantomJS和wkhtmltopdf / wkhtmltoimage是很好的替代品，可以更好地处理这些事情。
回答by Antti Vikman
I had bit similar problem and this is what I ended up doing
我有一点类似的问题，这就是我最终做的
html2canvas($('#div_id'), {width: 750, height: 1050}).then(
function(canvas) {
window.open(canvas.toDataURL("image/png"));
}
)
Now this still lead to blurry images (especially with text), but that was because my default zoom on browser was set to 110% those causing the window.devicePixelRatio to be 1.1000... I sorted that out by simply showing warning for user (worked for the purpose I need it), but apparently there is a better way to solve it https://stackoverflow.com/a/22819006/460586
现在这仍然导致图像模糊（尤其是文本），但那是因为我在浏览器上的默认缩放设置为 110%，导致 window.devicePixelRatio 为 1.1000 ......我通过简单地向用户显示警告来解决这个问题（为我需要的目的而工作），但显然有更好的方法来解决它https://stackoverflow.com/a/22819006/460586
回答by javatogo
Even my images were coming pixelized and sometimes cramped when there was lot of content to fit within a pre-set width and height. After hours of searching, found a good solution from this post. It takes care of maintaining resolution to good extent even on zooming and no visible pixelization.
甚至我的图像也变得像素化，有时会在有很多内容适合预设的宽度和高度时变得局促。经过数小时的搜索，从这篇文章中找到了一个很好的解决方案。即使在缩放和没有可见像素化的情况下，它也能很好地保持分辨率。
html2canvas(document.getElementById('div_id'), {
onrendered: function(canvas) {
var ctx = canvas.getContext('2d');
ctx.webkitImageSmoothingEnabled = false;
ctx.mozImageSmoothingEnabled = false;
ctx.imageSmoothingEnabled = false;
var myImage = canvas.toDataURL("image/jpeg,1.0");
}
});
