我在顶部创建了一个mail button
的网页。
<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>
我的html
函数的下两行on click
行。
<a id="test"></a>
<div id="box1"></div>
现在,当我点击此按钮时,它应该以屏幕截图显示当前页面并将其另存为图像。为了获取截图,我通过谷歌搜索并获得了此CSS
代码。
<script type="text/javascript" src="js/html2canvas.js"></script>
<script type="text/javascript" src="js/html2canvas.min.js"></script>
<script type="text/javascript">
function genScreenshot() {
html2canvas(document.body, {
onrendered: function(canvas) {
$('#box1').html("");
$('#box1').append(canvas);
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>
但是我没有获得屏幕截图,请在这里帮助我。 我是堆叠流量的新手,所以请原谅我的语法错误,如果有人更改了问题格式,我将非常感激。提前谢谢大家。