uni-app开发H5项目如何保存指定view为图片

1. 安装依赖

安装这两个依赖
    "html2canvas": "^1.4.1",
    "image-tools": "^1.4.0",
npm安装命令:
	npm -i -s html2canvas image-tools

2. 代码实现
   代码使用vue实现,其中imageWrapper1是view标签上的ref,例如:
   
   js代码:

	toImage() {
      uni.showLoading({
        title: '加载中'
      });
      html2canvas(this.$refs.imageWrapper1.$el).then(canvas => {
        let dataURL = canvas.toDataURL("image/png");
        base64ToPath(dataURL).then(path => {
          this.saveHeadImgFile(path, 'test1.png')
          uni.hideLoading();
        })
      });
    },
    saveHeadImgFile(domImg, filename) {
      // 创建隐藏的可下载链接
      let eleLink = document.createElement('a');
      eleLink.href = domImg;
      eleLink.download = filename;
      eleLink.style.display = 'none';
      // 触发点击
      document.body.appendChild(eleLink);
      eleLink.click();
      // 然后移除
      document.body.removeChild(eleLink);
    }

3. 在需要的时候调用this.toImage()即可
4. 注意:
   • 如果需要多个调用,为了避免执行时的干扰,可以修改代码
     方法1:每一个a标签给一个新增的id,并且可根据id删除a标签
     方法2:使用setTimeout函数,延迟执行(不一定保险)
     方法3:在第一个执行结束后在回调函数中调用方法进行下一个图片的下载
   • 对于请求的网络图片可能不能截取到,有解决的请联系我,目前的解决方案是直接把背景图放在static目录下