小程序Canvas 2D自定义生成转发图片

async addAvatar() {
      // 下载到本地
      const [err, res] = await uni.getImageInfo({
        src: avatarUrl
      })
      const { path, type } = res
      const img = canvas.createImage()
      img.src = path
      // 直接设置 width height 是不生效
      const offsetX = 20 * dpr
      const offsetY = 20 * dpr
      const r = (50 * dpr) / 2
      const circle = {
            x: offsetX + r,
            y: offsetY + r,
            r: r
          }
      // 这样写是因为最后绘制的时候是执行一个 ()=> Promise<any>
      // 这样可以确保生成的时候，图片已经 onload了
      await new Promise((resolve, reject) => {
        img.onload = () => {
          ctx.save()
          // 切圆角
          ctx.beginPath()
          ctx.arc(circle.x, circle.y, circle.r, Math.PI * 2, false)
          ctx.clip()
          // 画成指定的长和高
          ctx.drawImage(img, offsetX, offsetY, 50 * dpr, 50 * dpr)
          ctx.restore()
          resolve()
        }
        img.onerror = event => {
          reject(event)
        }
      })
    }

ctx.translate(x, y)
ctx.scale(dpr / 2, dpr / 2)

onShareAppMessage() {
  const createPromise = async () => {
      try {
        this.shareBtnLoading = true
        // 获得图片的临时路径
        const loaclPath = await aWayToGetCanvasTempFilePath()

        return {
          title: 'hello, i am icebreaker',
          path: 'resolve path',
          imageUrl: loaclPath
        }
      } catch (e) {
        console.warn(e)
      } finally {
        this.shareBtnLoading = false
      }
  }
  return {
    title: 'fallback title',
    promise: createPromise(),
    path: 'fallback path',
    imageUrl: 'fallback imageUrl'
  }
}