小程序中曾经遇到的坑(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回调中执行的操作,这就让我纳闷了!!!到底是什么原因导致出现的问题?我从数组取值,直接用浏览器访问图片,可以打开,而小程序确画不上去,着实让人头疼!!!当然这个并不是最伤脑筋的,我就开始推测可能出现的问题:

1. 网络问题
2. 小程序图片加载的问题
3. 可能是和开发者工具有关

接着,开始慢慢测试呗,网络问题被窝瞬间排查出去,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