小程序新的 canvas 2d 坑有点多，粗略统计有以下 6 坑：
1、canvasToTempFilePath 生成的临时文件在开发工具中显示不了，在真机上可以显示。刚开始没用真机测试，一直在开发工具中调试，浪费不少时间。
2、canvas 的尺寸要写在 wxml 中才会跟随屏幕比例自适应大小。切记，不要写在 css 中，加 important 也没有。假如你也是用 Taro，那就这样写：
<Canvas type="2d" className="canvas" style={{ width: '375px', height: '525px' }} id="my-canvas" />
3、图片不能直接使用 src 画在 canvas 上，要先 createImage，接着 onLoad 后再画在 canvas 上。
wx.getImageInfo({
src: 'testPath/test.png',
success: (res) => {
const image = canvas.createImage()
image.src = res.path
image.onload = () => {
ctx.drawImage(image, 0, 0, 100, 100)
}
}
})
4、生成小程序码返回的临时文件不能直接画在 canvas 上，可以保存到云端再 download 下来使用。
5、getImageInfo 也有坑，取不到图片会一直 pending，要使用 wx.cloud.downloadFile 接口判断之前是否生成过小程序码，有的话直接返回 fileId，无需再次生成。
6、最后一个大坑（官方已经优化解决），就是云开发数据库自动生成的 id。早期的 id 是超过 32 位的，不能用来作为 scene，最近他们改成了 32 位。所以这里需要作个判断，如果不考虑早期数据，在页面上不显示生成海报的入口就行了。
发表评论