dcloud中的网页生成为图片

发表评论
1372 views

大概思路

在h5页面中将节点转换为cavans，得到base64，然后调用api保存到本地
避免截图不全的问题，html2canvas是根据body进行截图，若内容高度高于body时，就会出现这样的问题(大概意思就是有滚动条时造成的)。解决方案：(在生成截图前，先把滚动条置顶)
安装依赖
bash npm install html2canvas
代码
import html2canvas from 'html2canvas';
saveCanvas() {
    // 滚动条置顶
    window.pageYOffset = 0;
    document.documentElement.scrollTop = 0
    document.body.scrollTop = 0
    // 获取节点对象
    let canvas = document.getElementById('canvasWrap');
    let that = this;
    // 生成base64对象
    html2canvas(canvas, {
      scale: 2,
      logging: false,
      useCORS: true,
    }).then((canvas) => {
      // document.body.appendChild(canvas)
      var base64Url = canvas.toDataURL();
      this.saveImage(base64Url, {
        onScuess: function (i) {
          uni.showToast({
            icon: 'none',
            title: '保存成功'
          });
        },
        onFail: function (e) {
          console.log("保存失败：", e)
        }
      });

    });
  },