nanhuashi_applet/pages/prayers/wx2canvas.js

import Wxml2Canvas from 'wxml2canvas'
export const startDraw = ()=> {
  let that = this
  // 创建wxml2canvas对象
  let drawMyImage = new Wxml2Canvas({
    element: 'myCanvas', // canvas的id,
    obj: that, // 传入当前组件的this
    width: 200* 2,
    height: 200 * 2,
    background: '#141415', // 生成图片的背景色
    progress(percent) { // 进度
      console.log(percent);
    },
    finish(url) { // 生成的图片
      wx.hideLoading()
      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);
}
export const drawMyCanvas = () => {
  wx.showLoading()
  const that = this
  wx.createSelectorQuery()
    .select('#my-canvas') // 在 WXML 中填入的 id
    .fields({ scrollOffset: true, size: true }, () => {
      startDraw()
    }).exec(() => {
      console.log(888)
    })
} 

export const 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: url,
                        success: function () {
                          wx.showToast({
                            title: '保存成功',
                            icon: 'success',
                            duration: 2000
                          })
                        },
                    })
                } else {
                    wx.showToast({
                        title: '授权失败，请稍后重新获取',
                        icon: 'none',
                        duration: 1500
                    });
                }
              }
            })
          }
        })
      }
    }
  })
}