html2canvas,html2canvas截取图片,html2canvas快照，vue html2canvas快照,vue使用html2canvas截图

页面截图，快照vue使用

第一步

npm install html2canvas

第二步  

在使用的页面引入

import html2canvas from 'html2canvas';    

页面 

截图内容外框 id    nodeBox

<template>
  <div class="app-container">
    <div id="nodeBox">
            <div class="body-box">
    内容内容
              </div>
      </div>

 

    <img id="downImg" :src="dataurl" alt />

  </div>
</template>        

js

  //截取图片
    setImage() {
    //要先置顶，避免只截图一半
      window.pageYoffset = 0;
      document.documentElement.scrollTop = 0;
      document.body.scrollTop = 0;
      let that = this;
      var canvas2 = document.createElement("canvas");
      let _canvas = document.getElementById("nodeBox");
      var w = parseInt(window.getComputedStyle(_canvas).width);
      var h = parseInt(window.getComputedStyle(_canvas).height);
      //将canvas画布放大若干倍，然后盛放在较小的容器内，就显得不模糊了
      canvas2.width = w ;
      canvas2.height = h ;
      canvas2.style.width = w + "px";
      canvas2.style.height = h + "px";
      //可以按照自己的需求，对context的参数修改,translate指的是偏移量
      var context = canvas2.getContext("2d");
      html2canvas(document.getElementById("nodeBox"), {
        canvas: canvas2
      }).then(function(canvas) {
        var pageData = canvas.toDataURL("image/jpeg", 1.0);
        that.dataurl = pageData;

      crudMatchingConfim.uploadImage64({ file: pageData }).then(data => {
          var configPic = data.fileName;
          crudMatchingConfim
            .fkBankExcelConfirm({
              configPic: configPic,
              batchNo: that.$route.query.batchNo
            })
            .then(data => {
              that.nextDetails();
            });
        });


      });
    },

　　　　　// 下载图片
        // that.saveFile(
        //   pageData.replace("image/jpeg", "image/octet-stream"),
        //   new Date().getTime() + ".jpeg"
        // );
      });
    },
    /**
     * 在本地进行文件保存
     * @param {String} data 要保存到本地的图片数据
     * @param {String} filename 文件名
     */
    saveFile(data, filename) {
      var save_link = document.createElementNS(
        "http://www.w3.org/1999/xhtml",
        "a"
      );
      save_link.href = data;
      save_link.download = filename;
      var event = document.createEvent("MouseEvents");
      event.initMouseEvent(
        "click",
        true,
        false,
        window,
        0,
        0,
        0,
        0,
        0,
        false,
        false,
        false,
        false,
        0,
        null
      );
      save_link.dispatchEvent(event);
    },
    getBlob(canvas) {
      //获取blob对象
      var data = canvas.toDataURL("image/jpeg", 1);
      this.dataurl = data;
      console.log(this.dataurl);
      data = data.split(",")[1];
      data = window.atob(data);
      var ia = new Uint8Array(data.length);
      for (var i = 0; i < data.length; i++) {
        ia[i] = data.charCodeAt(i);
      }
      return new Blob([ia], {
        type: "image/jpeg"
      });
    }