vue实现截图功能并保存至本地

1、安装

npm install html2canvas --save

2、引入

import html2canvas from 'html2canvas'

3、template：

4、scripts：

//   截取图片
      setImage () {
      let that = this;
      var canvas2 = document.createElement("canvas");
      // let _canvas = document.getElementById('child');
      let _canvas = document.getElementById('nodeBox');
      var w = parseInt(window.getComputedStyle(_canvas).width);
      var h = parseInt(window.getComputedStyle(_canvas).height);
      //将canvas画布放大若干倍，然后盛放在较小的容器内，就显得不模糊了  
      canvas2.width = w * 4;
      canvas2.height = h * 4;
      canvas2.style.width = w + "px";
      canvas2.style.height = h + "px";
      //可以按照自己的需求，对context的参数修改,translate指的是偏移量  
      var context = canvas2.getContext("2d");
      context.scale(2, 2);
         html2canvas(document.getElementById('nodeBox'), {
        canvas: canvas2
      }).then(function (canvas) {
        var blob = that.getBlob(canvas);
        var oMyForm = new FormData();
        var fileName = "mobile" + '.jpg'
        oMyForm.append("file", blob, fileName);
        //              oMyForm.append("fileName", fileName);　　　　
        oMyForm.append("fileType", 'image');
        oMyForm.append("user_id", that)
      });
    },
    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"
      });
    },

5、应用：

6、如果需要将图片下载保存至本地

//将图片下载到本地
downImg() {
    let a = document.createElement("a"); // 生成一个a元素
    let event = new MouseEvent("click"); // 创建一个单击事件
    a.download = name || "信用卡推荐二维码"; // 设置图片名称没有设置则为默认
    a.href = this.dataurl; // 将生成的URL设置为a.href属性
    a.dispatchEvent(event); // 触发a的单击事件
}