JS截图（html2canvas）

JS截图（html2canvas）

• 引入js

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

• 截图操作

  <script type="text/javascript">
      $(document).ready(function () {

              document.querySelector('.btn').onclick = function(){
                  html2canvas(document.querySelector("#targetDom")).then(function (canvas) {
                      //获取截取图片路径
                      var base64Url = canvas.toDataURL('image/png');
                      //存入页面指定位置
                      document.getElementById("screenShotImg").src = base64Url;
                     //后台操作处理
                      var base64 = "<img src=" + base64Url + " />"
                  });
              }
      }); 

  </script>

• html页面

 　　<!--截取区域（通过Id控制） -->
     <div id="targetDom">
         <img id="picture" src="img/magic.jpg">
     </div>

     <!-- 存放截图 -->
     <img id="screenShotImg">

     <div class="btn">点击截图</div>

• css样式

 <style type="text/css">
 .btn {
     width: 6rem;
     height: 2rem;
     line-height: 2rem;
     text-align: center;
     color: #fff;
     background: red;
 }
 </style>

• 演示效果

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

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