javascript div截图 js截图指定位置

JS截图（html2canvas）

• 引入js

1  <script type="text/javascript" src="js/html2canvas.js"></script>
2  <script type="text/javascript" src="js/jquery2.2.4.min.js"></script>

• 截图操作

1  <script type="text/javascript">
 2      $(document).ready(function () {
 3          
 4              document.querySelector('.btn').onclick = function(){
 5                  html2canvas(document.querySelector("#targetDom")).then(function (canvas) {
 6                      //获取截取图片路径
 7                      var base64Url = canvas.toDataURL('image/png');
 8                      //存入页面指定位置
 9                      document.getElementById("screenShotImg").src = base64Url;                     
10                     //后台操作处理
11                      var base64 = "<img src=" + base64Url + " />"                     
12                  });
13              }         
14      }); 
15  
16  </script>

• html页面

1 　　<!--截取区域（通过Id控制） -->
2     <div id="targetDom">
3         <img id="picture" src="img/magic.jpg">
4     </div>
5     
6     <!-- 存放截图 -->
7     <img id="screenShotImg">
8     
9     <div class="btn">点击截图</div>

• css样式

1 <style type="text/css">
 2 .btn {
 3     width: 6rem;
 4     height: 2rem;
 5     line-height: 2rem;
 6     text-align: center;
 7     color: #fff;
 8     background: red;
 9 }
10 </style>

• 演示效果

 

• 所需控件下载：https://pan.baidu.com/s/13kWFBFJ9xdii1TC6qXN4bA    gd4t