import cloud from 'wx-server-sdk'

cloud.init({
  env: cloud.DYNAMIC_CURRENT_ENV
})

export async function main (event, context) {
  const { scene = '', page, width = 430, autoColor, lineColor, isHyaline } = event
  const result = await cloud.openapi.wxacode.getUnlimited({
    scene,
    page,
    width,
    autoColor,
    lineColor,
    isHyaline
  })
  return result
}
// 笔者使用了打包工具, 大家想直接跑，把 esm 转化为 cjs 即可 

{
  "permissions": {
    "openapi": ["wxacode.getUnlimited"]
  }
}

const suffixMap = {
  'image/jpeg': 'jpeg',
  ...
}

export function getPath(filename = 'tmp', contentType = 'image/jpeg') {
  return `${wx.env.USER_DATA_PATH}/${filename}.${suffixMap[contentType] || 'jpeg'}`
}

export function writeFile(buff, contentType = 'image/jpeg', filename = 'tmp') {
  return new Promise((resolve, reject) => {
    const fsm = wx.getFileSystemManager()
    const filePath = getPath(filename, contentType)
    fsm.writeFile({
      filePath,
      data: buff,
      encoding: 'binary',
      success() {
        resolve(filePath)
      },
      fail(error) {
        reject(error)
      }
    })
  })
}

....
// 在需要用到的地方直接
try {
  loading('生成中')
  const result = await getQrcode(scene, option) // 云调用封装function
  return await writeFile(result.buffer, result.contentType, scene) // : string
} catch (e) {
  console.error(e)
} finally {
  loaded()
}

<!-- uni-app vue 格式，可自行转化为 wxml 简单的语法转化 `: => {{}}` -->
<canvas
  :class="visible ? '': 'canvas offscreen'"
  type="2d"
  id="canvas"
  :style="{
  width:width+'rpx',
  height:height+'rpx'
  }"
></canvas>

// scss
.canvas.offscreen{ // 2个 class 选择器，增加优先级
  position: absolute;
  bottom: 0;
  left: -9999rpx;
  // 这叫物理离屏渲染，笑~
}

let canvas
let ctx
{...codes...}
onReady(){
  uni
    .createSelectorQuery()
    .in(this)  // 如果canvas在组件中，则需要加这一行
    .select('#canvas')
    .fields({
      node: true,
      size: true
    })
    .exec((res) => {
      if (res[0]) {
        this.canvas = canvas = res[0].node
        this.ctx = ctx = canvas.getContext('2d')
        // 下面可根据设备的 pixelRatio 自行按比例调整，此处为了演示方便，就直接赋值了。
        canvas.width = 430
        canvas.height = 430
      }
    })
}

async drawBackgroud (orginQrcodeUrl) {
  const [err, res] = await uni.getImageInfo({
    // 这里可以是远程地址(需要配置downloadUrl)
    // 也可以是本地地址(直接返回参数自己)
    // 甚至 cloud:// 前缀的云存储url也可以哟
    src: orginQrcodeUrl 
  })
  if (err) {
    throw err
  }
  const { path } = res
  const img = canvas.createImage()
  img.src = path
  await new Promise((resolve, reject) => {
    img.onload = () => {
      // 下面这一行，把小程序码，整个铺进画布中!
      ctx.drawImage(img, 0, 0, canvas.width, canvas.height)
      resolve()
    }
    img.onerror = (event) => {
      reject(event)
    }
  })
},

async drawAvatar (remoteAvatarUrl) {
  const [err, res] = await uni.getImageInfo({
    // 比如这里我用了云储存里的图像地址 prefix: cloud://
    src: remoteAvatarUrl
  })
  if (err) {
    throw err
  }
  const { path } = res
  const img = canvas.createImage()
  img.src = path
  // 测量数据在这里用上了
  const offsetX = 120 // x 轴偏移 120px
  const offsetY = 120 // y 轴偏移 120px
  const diam = 190 // 圆的直径 (430 - 120* 2) / 2
  const radius = diam / 2 // 圆的半径
  const borderWidth = 2 // 多加2px来把原先logo的纯色边抹除
  const circle = { // 裁剪部分圆的大小属性
    x: offsetX + radius,
    y: offsetY + radius,
    radius: radius + borderWidth 
  }
  await new Promise((resolve, reject) => {
    img.onload = () => {
      ctx.save()
      // 开始! 把原先中间的Logo干掉!
      ctx.arc(circle.x, circle.y, circle.radius, 0, Math.PI 2, false)
      ctx.clip()
      // 结束
      // 开始! 把我们需要的自定义图像，平铺的插入进去！
      ctx.drawImage(
        img,
        offsetX - borderWidth,
        offsetY - borderWidth,
        circle.radius * 2,
        circle.radius * 2
      )
      // 结束
      ctx.restore()
      resolve()
    }
    img.onerror = (event) => {
      reject(event)
    }
  })
},

// 获取 tempFilePath
async getImage () {
  const [err, res] = await uni.canvasToTempFilePath({
    canvas
  })
  if (err) {
    throw err
  }
  return res.tempFilePath
}
// 预览
async preview (src) {
  if (src) {
    uni.previewImage({
      urls: [src]
    })
  }
},
// 保存到相册里
async save (src) {
  try {
    // 先授权，后保存
    await authorize('scope.writePhotosAlbum')
    const [err, res] = await uni.saveImageToPhotosAlbum({
      filePath: src
    })
    if (err) {
      throw err
    }
    this.$success('保存成功！')
  } catch (e) {
    console.error(e)
  }
}