很快微信开发者平台

 找回密码
 注册
查看: 4403|回复: 2

微信小程序canvas图片加载问题,图片显示不出来的解决办法

[复制链接]

30

主题

55

帖子

1075

积分

专家路上

积分
1075
 楼主| 发表于 2018-5-9 00:16:49 | 显示全部楼层 |阅读模式
本帖最后由 五道杠 于 2018-5-9 00:17 编辑

目前正在开发小程序,在开发过程中,总会遇到一些坑,而这些坑并不会有很多开发者遇到而说出来.这里先记录一条我开发过程中遇到的问题,以便后人在开发中能够更容易的解决问题!!!

首先,小程序在canvas画自己想要的图时,我通常会用以下两种获取图片的方式:

1. 通过wx.downloadFile加载图片时,图片的路径为:res.tempFilePath;以下为官方api
  1. wx.downloadFile({
  2.   url: 'https://example.com/audio/123', //仅为示例,并非真实的资源
  3.   success: function(res) {
  4.     // 只要服务器有响应数据,就会把响应内容写入文件并进入 success 回调,业务需要自行判断是否下载到了想要的内容
  5.     if (res.statusCode === 200) {
  6.         wx.playVoice({
  7.           filePath: res.tempFilePath  //临时文件路径,下载后的文件会存储到一个临时文件
  8.         })
  9.     }
  10.   }
  11. })
复制代码

2. 通过wx.getImageInfo加载图片时,图片的路径为:res.path;以下为官方api
  1. wx.getImageInfo({
  2.   src: 'images/a.jpg',
  3.   success: function (res) {
  4.     console.log(res.path) //打印图片的本地路径
  5.   }
  6. })
复制代码

如果你已经在画布上画了一张背景图,继续画其他的图片时,就会遇到可能你的路径是正确的,但是就是画不上去,而且success回调函数确实调用成功了,此时,你会不会很无解?

由于我是开发过程中在一张底图画四张小图片,而且是依着顺序画,毕竟是从数组取到的值,所以会在第一张画完后success函数中继续加同样的获取图片然后ctx.drawImage()操作,这样就能保证前面图片的可以画上去,当然你也可以单独拆分出来获取,我只是习惯性的写法,可能不是最佳方案(自行参考)

问题就出来了,我画的四张图片竟然有一张或者两张不显示,而且不报错,是不是很神奇?而且是都是success回调中执行的操作,这就让我纳闷了!!!到底是什么原因导致出现的问题?我从数组取值,直接用浏览器访问图片,可以打开,而小程序确画不上去,着实让人头疼!!!当然这个并不是最伤脑筋的,我就开始推测可能出现的问题:


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


接着,开始慢慢测试呗,网络问题被窝瞬间排查出去,name就是图片加载咯,我只能console.log()打印success回调中的参数,问题出来了,参数给的path或者tempFilePath是json数据!!!同时给出的statusCode为404,,,是不是很无语,我给他传入的图片路径是正确的,而他加载出来的却是404,找不到???好吧,我服了YOU,我只能用傻傻的办法,给了它一个if判断
  1. if (res.statusCode == 404) {
  2.      ctx.drawImage(res.tempFilePath, parseInt(canvasWidth) / 9.4, parseInt(canvasWidth) / 2.6, parseInt(canvasWidth) / 2.8428, parseInt(canvasWidth) / 2.8428);
  3.      ctx.draw(true)
  4. }  //parseInt(canvasWidth)/n  是我对不同手机canvas画图时用的处理兼容算的值  根据宽度控制
复制代码

我的if判断是在它第一次ctx.drawImage结束后判断,然后再让它执行一次,这样他就会老老实实的给我去找图片然后加载画上去,事实证明问题解决了.(当然我每个都加了一遍,防止意外,哈哈)

总结:遇到问题不可怕,可怕的是遇到问题不知道怎么解决,然后乱了思绪。

程序员最好的状态应该就是遇到问题反而兴奋,寻求解决办法,解决后的那种小小的成就感。


原文:https://zhuanlan.zhihu.com/p/33726623
回复

使用道具 举报

2

主题

141

帖子

5708

积分

S1

积分
5708
QQ
发表于 2018-5-9 08:37:40 | 显示全部楼层
谢谢分享
回复

使用道具 举报

2

主题

382

帖子

4378

积分

专家路上

积分
4378
发表于 2018-5-9 09:49:41 | 显示全部楼层
首先,小程序在canvas画自己想要的图时,我通常会用以下两种获取图片的方式:
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 注册

本版积分规则

QQ|Archiver|手机版|小黑屋|很快微信开发者平台 ( 京ICP备2021022608号 )

GMT+8, 2021-12-3 00:28 , Processed in 0.029040 second(s), 23 queries .

Powered by Discuz! X3.4

Copyright © 2001-2020, Tencent Cloud.

快速回复 返回顶部 返回列表