小程序中曾经遇到的坑(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

转载于:https://www.cnblogs.com/gxlself/p/8477393.html

小程序中曾经遇到的坑(1)----canvas画布相关推荐

在微信小程序中引用tensorflow.js坑向总结（一）
各种坑 1. Error:No backend found in registry 2. Error: This application has not registered any plugins ...
小程序多个echars_微信小程序中使用echarts以及踩坑总结
人在家中坐,锅从天上来. 半个月前本来在家写着一个项目,还没来得及提测,领导突然一个电话,需要立刻去支援另一个项目,一打听,一个烂尾半年的项目,纵使内心不愿意,还是要去啊.因为鲁迅说过,生活就像强*, ...
微信小程序中嵌套html_微信小程序：web-view嵌套H5实现微信支付功能解决方案及填坑...
ab7117c7d4947210c39e126a01d23ede.jpg 最近一个多月加班比较严重,偶尔休息一天也是在补睡眠+陪家人,比较长时间没有来进行总结记录了.今天不加班,开始为这段时间做的东西 ...
开发微信小程序中遇到的坑及解决方法
开发微信小程序中遇到的坑及解决方法参考文章: (1)开发微信小程序中遇到的坑及解决方法 (2)https://www.cnblogs.com/feiye512/p/6070052.html ...
微信小程序中开发的小坑
微信小程序中开发的小坑本文随时更新微信小程序开发过程中遇到的小坑.现已收集如下. 微信小程序编译后的大小不能超过1MB. 微信小程序不能建立两个(含)以上的WebStock连接.
微信小程序中base64格式的小程序码通过canvas画出来无效
使用场景小程序中的文章详情页面有一个分享功能:用户点击分享按钮,生成一张分享图片(包括封面图,简介以及带有文章ID的小程序码),方便用户保存在本地. 问题说明小程序码通过后台接口获取,格式如下:' ...
在微信小程序中绘制图表（part3）
本期大纲 1.饼图绘制 2.如何添加动画效果 3.使用rollup构建项目相关阅读: 在微信小程序中绘制图表(part1) 在微信小程序中绘制图表(part2) 关注我的 github 项目查看完 ...
微信小程序：高德地图在小程序中的实践（含静态地图）
前言前人栽树,后人乘凉.记录下工作的点点滴滴,让同道中人少走弯路~ 来看看需求和问题:房产相关的项目,详情中需要显示房源地址,底部要有固定的菜单(不是tabbar),房源数据过多,数据超过一屏时,m ...
微信小程序中用户登录和登录态维护
微信小程序和以前的web项目不同,他是前后端分离的应用,之前我们的传统登录有web服务器提供Session维护, 后端在返回结果给前端web项目时,带上cookie,且以cookie值为key存储用户 ...

小程序中曾经遇到的坑(1)----canvas画布

小程序中曾经遇到的坑(1)----canvas画布相关推荐

最新文章

热门文章