Question

我在顶部创建了一个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>

但是我没有获得屏幕截图，请在这里帮助我。我是堆叠流量的新手，所以请原谅我的语法错误，如果有人更改了问题格式，我将非常感激。提前谢谢大家。

截取我当前网页的截图并保存

0 个答案: