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

• html2canvas詳解：http://html2canvas.hertzen.com/