jquery 截取屏幕

最新推荐文章于 2021-12-15 11:37:35 发布

dcli98004

最新推荐文章于 2021-12-15 11:37:35 发布

阅读量298

点赞数 1

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/wt-vip/p/10119913.html

版权

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8"> 
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"> 
<title>Test</title> 
<style type="text/css"> 
*{ 
  margin:0 auto; 
  padding:0; 
} 
.btn{ 
  width:100px; 
  height:30px; 
  line-height:30px; 
  background:green; 
  color:#fff; 
  border-radius:10px; 
  -webkit-border-radius:10px; 
  text-align:center; 
  display:block; 
  text-decoration:none; 
  } 
.container{ 
  background:#e5e5e5; 
} 
</style> 
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> 
<script src="https://cdn.bootcss.com/html2canvas/0.4.1/html2canvas.js"></script> 
<script> 
  
$(function(){ 
  $("#btn").click(function(){ 
    html2canvas($("#container"), { 
      onrendered: function(canvas) { 
        //把截取到的图片替换到a标签的路径下载 
        $("#download").attr('href',canvas.toDataURL()); 
        //下载下来的图片名字 
        $("#download").attr('download',new Date().getTime() + ".png"); 
        //展示图片
        document.body.appendChild(canvas); 
      } 
    }); 
  }); 
}); 
</script> 
</head> 
  
<body> 
  <div style="padding:10px 0"> 
    <div class="btn" id="btn">截取屏幕</div> 
    <p style="color:red; text-align:center;">先点击截取屏幕后再点击截图下载</p> 
    <div style="margin-top:10px"> 
      <a href="javascript:;" rel="external nofollow" class="btn" id="download">截图下载</a> 
    </div> 
  </div> 
  <div class="container" id="container"> 
    <p style="text-align:center">这里是待截取模块</p> 
  </div> 
</body> 
</html>