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

时间:2016-10-14 07:25:16

标签: javascript html css

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

没有答案