html+canvas实现屏幕截取

nbsp;html> 
 
 
<meta> 
<meta> 
<title>Test</title> 
<style> 
*{ 
  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></script> 
<script></script> 
<script> 
 
$(function(){ 
  $("#btn").click(function(){ 
    html2canvas($("#container"), { 
      onrendered: function(canvas) { 
        //把截取到的图片替换到a标签的路径下载 
        $("#download").attr(&#39;href&#39;,canvas.toDataURL()); 
        //下载下来的图片名字 
        $("#download").attr(&#39;download&#39;,&#39;share.png&#39;) ;  
        document.body.appendChild(canvas); 
      } 
//可以带上宽高截取你所需要的部分内容 
//     , 
//     width: 300, 
//     height: 300 
    }); 
  }); 
}); 
</script> 
 
 
 
  <p> 
    </p><p>截取屏幕</p> 
    <p>先点击截取屏幕后再点击截图下载</p> 
    <p> 
      <a>截图下载</a> 
    </p> 
   
  <p> 
    </p><p>以下是测试内容</p> 
    <img  alt="html+canvas实现屏幕截取" >