小程序canvas踩坑

本文介绍了canvas画布组件,它是原生组件使用有相关限制,且很多操作是异步执行易引发问题。还分享了使用canvasContext.drawImage时的踩坑经验,如不能直接用网络图片,需用wx.downloadFile或wx.getImageInfo获取临时文件路径来画图。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

canvas

画布。该组件是原生组件,使用时请注意相关限制。

的确很多限制!!!


canvas 中很多 API 都是异步执行,这导致很多问题!比如 图片怎么没画上去等等~~~

其中,我踩到的坑:

  • canvasContext.drawImage 不能直接用网络图片(也不能用Base64),需要下用 **wx.downloadFile(OBJECT)** 下载成功后以 tempFilePath 的形式传给页面,res = {tempFilePath: ‘文件的临时路径’},用这个 tempFilePath 才能画图。
  • wx.downloadFile(OBJECT)异步 执行
  • wx.getImageInfo(OBJECT) 也是 异步 执行 getImageInfo相当于先使用downloadFile下载文件再获取图片的信息。如果只是需要临时文件路径,用downloadFile即可,如果还需要更多的图片信息,则使用getImageInfo
  • canvasContext.draw 异步
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值