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/