微信小程序码 - canvas绘制海报注意点

851 阅读1分钟

效果图

WechatIMG834.jpeg

注意点

canvas 绘制前需要拿到小程序码图片,目前可以通过downloadFile和fs.writeFile来获取小程序码图片

  • 在通过fs.writeFile读取小程序码时要注意data:ArrayBuffer格式,所以在想服务端请求时,responseType要设置为ArrayBuffer,通过base64编码读取二进制数据得到小程序码图片。
  • 在临时保存小程序码时注意图片名称设计随机,否则有可能出现新的小程序码并没有覆盖上一个导致的错误。

以下代码,请求服务接口

wx.request({
    url: '',
    data: data,
    header: {},
    responseType: 'ArrayBuffer'
})

获取小程序码图片

const tmpPath = wx.env.USER_DATA_PATH + "/" + Date.now() + "wxcode.png"

wx.getFileSystemManager().writeFile({
    filePath: tmpPath,
    data: imgData,
    encoding: 'base64',
    success: res => {
        // 发挥想象绘制~
        const ctx = wx.createCanvasContext('sCanvas',this)
        ctx.drawImage(tmpPath,0,0,0,0)
    }
})