wxml2canvas将小程序页面转化成图片

wxml2canvas将小程序页面转化成图片

wxml

必须设置canvas的宽高才能显示出图片

<canvas canvas-id="myCanvas" class="myCanvas" style="width: {{width}}px; height:{{height+10}}px;position: absolute;left: -100%;bottom: 0;"></canvas>
<view id="my-canvas" class="my_canvas">
    <view class="pre_nurse my_draw_canvas">
      <view class="notice my_draw_canvas">
        <text class="notice_text my_draw_canvas" data-type="text" data-text="小贴士">小贴士</text>
      </view>
    </view>
  </view>

设置canvas到其他位置就不占页面的位置，注意需要绘制的都要加同一个class： my_draw_canvas，每一个都要加才能绘制出来
data-type=“text” data-text=“小贴士” view和text有需要绘制内容的都需要加
data-type=“image” data-url=“本地地址” 绘制图片
如果包含在线的图片链接，需要在微信小程序后台设置白名单，将在线链接的域名放置downloadFile合法域名里，否则生成图片的时候会报错

js文件

  // 绘制图片
  drawMyCanvas() {
    wx.showLoading()
    const that = this
    const query = wx.createSelectorQuery().in(this);
    query.select('#my-canvas').fields({ // 选择需要生成canvas的范围
      size: true,
      scrollOffset: true
    }, data => {
      console.log(data,'data');
      let width = data.width;
      let height = data.height;
      that.setData({
        width,
        height
      })
      setTimeout(() => {
        that.startDraw()
      }, 1500);
    }).exec()
  },
  startDraw() {
    let that = this

    // 创建wxml2canvas对象
    let drawMyImage = new Wxml2Canvas({
      element: 'myCanvas', // canvas的id,
      obj: that, // 传入当前组件的this
      width: that.data.width *2,
      height: that.data.height * 2,
      background: '#fff', // 生成图片的背景色
      logging:false,//日志
      scrollY: 0,
      scrollX: 0,
      useCORS:true,//跨域
      allowTaint: true,
      progress(percent) { // 进度
        // console.log(percent);
      },
      finish(url) { // 生成的图片
        console.log(url);
        wx.hideLoading()
        that.savePoster(url)
      },
      error(res) { // 失败原因
        console.log(res);
        wx.hideLoading()
      }
    }, this);
    let data = {
      // 获取wxml数据
      list: [{
        type: 'wxml',
        class: '.my_canvas .my_draw_canvas', // my_canvas要绘制的wxml元素根类名， **my_draw_canvas**单个元素的类名（所有要绘制的单个元素都要添加该类名）
        limit: '.my_canvas', // 要绘制的wxml元素根类名
        x: 0,
        y: 0
      }]
    }
    // 绘制canvas
    drawMyImage.draw(data, this);
  },
  // 保存
  savePoster(url) {
    const that = this
    wx.saveImageToPhotosAlbum({
      filePath:url,
      success: function () {
        wx.showToast({
          title: '已保存至相册',
          icon: 'none',
          duration: 1500
        });
      },
      fail(err) {
        if (err.errMsg === "saveImageToPhotosAlbum:fail:auth denied" || err.errMsg === "saveImageToPhotosAlbum:fail auth deny" || err.errMsg === "saveImageToPhotosAlbum:fail authorize no response") {
          wx.showModal({
            title: '提示',
            content: '需要您授权保存相册',
            showCancel: false,
            success: modalSuccess => {
              wx.openSetting({
                success(settingdata) {
                  if (settingdata.authSetting['scope.writePhotosAlbum']) {
                    wx.saveImageToPhotosAlbum({
                      filePath: that.data.imgUrl,
                      success: function () {
                        wx.showToast({
                          title: '保存成功',
                          icon: 'success',
                          duration: 2000
                        })
                      },
                    })
                  } else {
                    wx.showToast({
                      title: '授权失败，请稍后重新获取',
                      icon: 'none',
                      duration: 1500
                    });
                  }
                }
              })
            }
          })
        }
      }
    })
  },

仅记录自己写的时候的注意点

安装 npm install wxml2canvas --save --production
引入 import Wxml2Canvas from ‘wxml2canvas’
原地址借鉴记录 https://github.com/liudongyun1215/wxml2canvas