[英]how to improve the quality of a `html2canvas` screen capture?
I have used the following html2canvas
code to take screenshots and download it. 我已使用以下
html2canvas
代码获取屏幕截图并下载了它。
html button creation html按钮创建
<button class="btn btn-default btn-sm" style="margin:0px 0px -10px 970px; padding:2px 4px 1px 4px" onclick="genScreenshot()"><span class="glyphicon glyphicon-envelope"></span></button>
<a id="test"></a>
<div id="box1"></div>
function definition 功能定义
<script type="text/javascript">
function genScreenshot() {
html2canvas(document.body, {
onrendered: function(canvas) {
$('#box1').html("");
if (navigator.userAgent.indexOf("MSIE ") > 0 ||
navigator.userAgent.match(/Trident.*rv\:11\./))
{
var blob = canvas.msToBlob();
window.navigator.msSaveBlob(blob,'Test file.png');
}
else {
$('#test').attr('href', canvas.toDataURL("image/png"));
$('#test').attr('download','screenshot.png');
$('#test')[0].click();
}
}
});
}
</script>
But the quality of the downloaded screenshot is not that good. 但是下载的屏幕截图的质量不是很好。 How can improve its quality?
如何改善其质量?
How about something like this: 这样的事情怎么样:
var $wrapper = $("#yourDiv");
setSize($wrapper, "2000px", "20pt");
html2canvas($wrapper, {
onrendered: function (canvas) {
var a = document.createElement('a');
a.href = canvas.toDataURL("image/jpg");
a.download = 'filename.jpg';
a.click();
setSize($wrapper, "1000px", "10pt");
}
});
function setSize(dv, width, fontsize) {
dv[0].style.width = width;
dv[0].style.fontSize = fontsize;
}
This resizes the div and font to bigger size and then shrinks back afterwards. 这会将div和字体的大小调整为更大的大小,然后再缩小。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.