小程序Canvas绘制多图层保存

• canvas绘制多个图片（2个为例）
• 图片叠加,可保存到相册
• 图片渲染的先后顺序
• 图片高清晰度保存
• 图片自适应

// 绘制图片函数
drawImage() {
  // 显示加载中提示
  wx.showLoading({
    title: '图片加载中...',
    mask: true
  })

  const _this = this
  // 创建选择器查询，获取Canvas节点信息
  wx.createSelectorQuery()
    .select('#myCanvas') // 选择在 WXML 中设置的 id
    .fields({
      node: true,
      size: true
    })
    .exec(async (res) => {
      const canvas = res[0].node
      const ctx = canvas.getContext('2d')
      const dpr = wx.getSystemInfoSync().pixelRatio
      const width = res[0].width
      const height = res[0].height
      canvas.width = width * dpr
      canvas.height = height * dpr
      ctx.scale(dpr, dpr)

      const image = canvas.createImage()
      const image2 = canvas.createImage()

      // 计算正方形二维码的尺寸和位置
      const w = width / 375
      const h = height / 667
      const rpx = w > h ? h : w

      const imageSize = 60 * rpx
      const x = (50.5 / 100) * width - imageSize * 0.5
      const y = (85.3 / 100) * height

      // 使用Promise确保第一张图片加载完成
      const loadImage1 = new Promise((resolve) => {
        image.onload = () => {
          // 绘制第一张图片（海报背景）
          ctx.drawImage(image, 0, 0, width, height)
          resolve()
        }
      })

      // 设置第一张图片src（海报背景）
      image.src = _this.data.master.urlSignUpPoster

      // 等待第一张图片加载完成后加载第二张图片（二维码）
      await loadImage1

      // 使用Promise确保第二张图片加载完成
      const loadImage2 = new Promise((resolve) => {
        image2.onload = () => {
          // 绘制第二张图片（二维码）
          ctx.drawImage(image2, x, y, imageSize, imageSize)
          resolve()
        }
      })

      // 设置第二张图片src（二维码）
      image2.src = _this.data.path

      // 等待第二张图片加载完成后隐藏加载中提示
      await loadImage2
      wx.hideLoading()
    })
},

// 保存图片到手机函数
saveToLocal() {
  // 弹出保存确认框
  wx.showModal({
    title: '保存图片',
    content: '保存海报到手机?',
    confirmColor: '#be3a34',
    success: (result) => {
      if (result.confirm) {
        // 创建选择器查询，获取Canvas节点信息
        wx.createSelectorQuery()
          .select('#myCanvas') // 选择在 WXML 中填入的 id
          .fields({
            node: true,
            size: true
          })
          .exec((res) => {
            const dpr = wx.getSystemInfoSync().pixelRatio
            // 获取Canvas对象
            const canvas = res[0].node
            const width = res[0].width
            const height = res[0].height
            // 将Canvas内容保存为临时文件
            wx.canvasToTempFilePath({
              x: 0,
              y: 0,
              width: canvas.width * dpr,
              height: canvas.height * dpr,
              destWidth: width * dpr,
              destHeight: height * dpr,
              canvas: canvas,
              success: (result) => {
                const {
                  tempFilePath
                } = result
                // 保存临时文件到手机相册
                wx.saveImageToPhotosAlbum({
                  filePath: tempFilePath,
                  quality: 1,
                  success: () => {
                    CommonUtils.showToast('保存成功！')
                  },
                  fail: () => {
                    CommonUtils.showToast('保存失败！')
                  }
                })
              },
              fail: () => {
                CommonUtils.showToast('保存失败！')
              }
            }, this)
          })
      }
    },
    fail: () => {},
    complete: () => {}
  })
},