小程序中曾经遇到的坑，1----canvas画布
目前正在开发小程序,在开发过程中,总会遇到一些坑,而这些坑并不会有很多开发者遇到而说出来.这里先记录一条我开发过程中遇到的问题,以便后人在开发中能够更容易的解决问题!!!
首先,小程序在canvas画自己想要的图时,我通常会用以下两种获取图片的方式:
1. 通过wx.downloadFile加载图片时,图片的路径为:res.tempFilePath;以下为官方api
wx.downloadFile({
url: 'https://example.com/audio/123', //仅为示例，并非真实的资源
success: function(res) {
// 只要服务器有响应数据，就会把响应内容写入文件并进入 success 回调，业务需要自行判断是否下载到了想要的内容
if (res.statusCode === 200) {
wx.playVoice({
filePath: res.tempFilePath //临时文件路径，下载后的文件会存储到一个临时文件
})
}
}
})
2. 通过wx.getImageInfo加载图片时,图片的路径为:res.path;以下为官方api
wx.getImageInfo({
src: 'images/a.jpg',
success: function (res) {
console.log(res.path) //打印图片的本地路径
}
})
如果你已经在画布上画了一张背景图,继续画其他的图片时,就会遇到可能你的路径是正确的,但是就是画不上去,而且success回调函数确实调用成功了,此时,你会不会很无解?
由于我是开发过程中在一张底图画四张小图片,而且是依着顺序画,毕竟是从数组取到的值,所以会在第一张画完后success函数中继续加同样的获取图片然后ctx.drawImage()操作,这样就能保证前面图片的可以画上去,当然你也可以单独拆分出来获取,我只是习惯性的写法,可能不是最佳方案(自行参考)
问题就出来了,我画的四张图片竟然有一张或者两张不显示,而且不报错,是不是很神奇?而且是都是success回调中执行的操作,这就让我纳闷了!!!到底是什么原因导致出现的问题?我从数组取值,直接用浏览器访问图片,可以打开,而小程序确画不上去,着实让人头疼!!!当然这个并不是最伤脑筋的,我就开始推测可能出现的问题:
- 网络问题
- 小程序图片加载的问题
- 可能是和开发者工具有关
接着,开始慢慢测试呗,网络问题被窝瞬间排查出去,name就是图片加载咯,我只能console.log()打印success回调中的参数,问题出来了,参数给的path或者tempFilePath是json数据!!!同时给出的statusCode为404,,,是不是很无语,我给他传入的图片路径是正确的,而他加载出来的却是404,找不到???好吧,我服了YOU,我只能用傻傻的办法,给了它一个if判断
if (res.statusCode == 404) {
ctx.drawImage(res.tempFilePath, parseInt(canvasWidth) / 9.4, parseInt(canvasWidth) / 2.6, parseInt(canvasWidth) / 2.8428, parseInt(canvasWidth) / 2.8428);
ctx.draw(true)
} //parseInt(canvasWidth)/n 是我对不同手机canvas画图时用的处理兼容算的值 根据宽度控制
我的if判断是在它第一次ctx.drawImage结束后判断,然后再让它执行一次,这样他就会老老实实的给我去找图片然后加载画上去,事实证明问题解决了.(当然我每个都加了一遍,防止意外,哈哈)
总结:遇到问题不可怕,可怕的是遇到问题不知道怎么解决,然后乱了思绪.
程序员最好的状态应该就是遇到问题反而兴奋,寻求解决办法,解决后的那种小小的成就感.
本篇文章转自我的知乎https://zhuanlan.zhihu.com/p/33726623