html2canvas截屏并保存到手机相册

复制代码<div ref="imageWrapper">  
   <p>要截屏的内容</p>  
</div>

复制代码// import html2canvas from "html2canvas"; // 当前vue文件引入html2canvas  
// components: {html2canvas}  

 // 点击保存图片  
    justDoIt() {  
      var that = this;  
      if (navigator.userAgent.indexOf("Html5Plus") >= 0) {  
        that.saveCodeBtnHide(1);  
        // 5+app环境  
        console.log("点击保存图片");  
        that.$nextTick(() => {  
          that.toImage();  
        });  
      }  
    },  
    // 网页截图  
    toImage() {  
      var that = this;  
      setTimeout(() => {  
        html2canvas(this.$refs.imageWrapper, {  
          backgroundColor: null,  
          useCORS: true, // 开启跨域配置  
          allowTaint: true, // 允许跨域图片  
          taintTest: true // 是否在渲染前测试图片  
        }).then(canvas => {  
          let dataURL = canvas.toDataURL("image/png");  
          console.log("网页截图");  
          //   console.log(dataURL);  
          that.savePicture(dataURL);  
        });  
      }, 300);  
    },  
    // 保存图片到相册中  
    savePicture(imgurl) {  
      var that = this;  
      var b = new plus.nativeObj.Bitmap("bitblmap");  
      console.log("☆☆☆☆☆☆ 保存图片到相册中");  
      console.log(b);  
      b.loadBase64Data(  
        imgurl,  
        function() {  
          console.log("图片创建成功");  
          var fileName = "_doc/img1.png";  
          b.save(  
            fileName,  
            { overwrite: true },  
            object => {  
              plus.gallery.save(  
                fileName,  
                () => {  
                  console.log("保存图片到相册成功");  
                },  
                () => {  
                  console.log("保存图片到相册失败");  
                }  
              );  
            },  
            () => {  
              console.log("保存失败");  
            }  
          );  
        },  
        function() {  
          console.log("图片创建失败");  
        }  
      );  
    }