评论

云开发生成海报踩坑记

小程序新的 canvas 2d 坑有点多,粗略统计有以下 6 坑。

小程序新的 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 位。所以这里需要作个判断,如果不考虑早期数据,在页面上不显示生成海报的入口就行了。

最后一次编辑于  06-27  
点赞 2
收藏
评论
登录 后发表内容