前端截图

html 部分

  <script src="./jquery-3.4.1.js"></script>
  <script type="text/javascript" src="http://cdn.bootcss.com/html2canvas/0.5.0-beta4/html2canvas.js"></script>

<input id="examplePic" type="button" value="保存图片"/>
<div id="editor" style="text-align: center" data-options="region:'center'">测试截图功能</div>
</body>

js 部分

 $(document).ready(function () {
    $("#examplePic").on("click", function (event) {
      // 取消掉默认的事件
      event.preventDefault();
      // 要截取的内容区域的id

      var _this = this;
      var targetDom = $("#page");
      var copyDom = targetDom.clone();
      copyDom.width(targetDom.width() + "px");
      copyDom.height(targetDom.height() + "px");
      $('body').append(copyDom);
      html2canvas(copyDom, {
        allowTaint: true, //  是否允许跨域(默认是false)
        // 是否在渲染前测试图片(默认是true)
        taintTest: false,
        onrendered: function (canvas) {
          var contentWidth = canvas.width;
          var contentHeight = canvas.height;
          var pageHeight = contentWidth / 592.28 * 841.89;
          var leftHeight = contentHeight;
          var position = 0;
          var f = "p";
          contentHeight > contentWidth ? f = 'p' : f = 'l';
          var pageData = canvas.toDataURL('image/png', 1.0);
          _this.aaa = canvas.toDataURL();
          //生成base64图片数据
          var dataUrl = canvas.toDataURL();
          var triggerDownload = $("<a>").attr("href", dataUrl).attr("download", "信息资源组织结构图.png").appendTo("body");
          triggerDownload[0].click();
          triggerDownload.remove();
           copyDom.remove()
        }
      });
    });
  });