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

首先,小程序在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

小程序中曾经遇到的坑(1)----canvas画布的更多相关文章

  1. 小程序中 radio 的一个坑,到底 checked 该赋什么值?

    https://blog.csdn.net/henryhu712/article/details/83059365

  2. 微信小程序中scroll-view的几个坑

    微信小程序中scroll-view的几个坑 1:设置scroll-x时,却不能横向滚动,因为view是block组件,但是这里用了flex就不能滚动了(想用flex布局,请开启属性enable-fle ...

  3. 微信小程序开发技巧及填坑记录

    以下是自己在开发过程中遇到的坑和小技巧,记录以下: 1.出现了 page[pages/XXX/XXX] not found.May be caused by :1. Forgot to add pag ...

  4. 微信小程序中实现微信支付

    最近在做微信小程序,今天刚好做到小程序里的微信支付这块,踩过不少坑,特此写个博客记录下,希望能帮到其它人吧. 我总结了一下,小程序中的微信支付和之前其它的公众号里的微信支付有两个区别,第一就是小程序必 ...

  5. 微信小程序之蓝牙 BLE 踩坑记录

    前言 前段时间接手了一个微信小程序的开发,主要使用了小程序在今年 3 月开放的蓝牙 API ,此过程踩坑无数,特此记录一下跳坑过程.顺便开了另一个相关的小项目,欢迎 start 和 fork: BLE ...

  6. 小程序——微信小程序初学踩过的坑

    微信小程序初学踩过的坑 一.前言     最近因为某些需要和个人兴趣打算开发一下微信小程序,经过在官方网站上的基本了解,我大体知道了微信小程序开发的大致过程,其实最本质的就是MVVM,借用了很多模式上 ...

  7. 网页或微信小程序中使元素占满整个屏幕高度

    在项目中经常要用到一个容器元素占满屏幕高度和宽度,然后再在这个容器元素里放置其他元素. 宽度很简单就是width:100% 但是高度呢,我们知道的是height:100%必须是在父元素的高度给定了的情 ...

  8. 微信小程序中rpx与rem单位使用

    原作者: 小小小   来自: 授权地址 本文讲解rpx和rem应用于微信小程序,如果你还没有入门,建议先从下面看起: 微信小程序官方文档web app变革之remrpx单位官方文档rpx单位基础介绍 ...

  9. 微信小程序中在swiper-item中遍历循环添加多个数据内容(微信小程序交流群:604788754)

    在小程序中为了实现一个<swiper-item>中添加多个内容重复的标签,那就需要使用wx:for循环.如果按小程序的简易教程,循环加在block中,而swiper-item放在里面.所有 ...

随机推荐

  1. Composer - windows下安装方法

    在windows下安装的方法 方法一:使用安装程序 这是将 Composer 安装在你机器上的最简单的方法. 下载并且运行 Composer-Setup.exe,它将安装最新版本的 Composer ...

  2. struts 中自定义action访问方法

    struts中action类继承了ActionSupport  默认实现了execute()方法 struts.xml配置文件中 然后可以配置如下映射: <package name =" ...

  3. CentOS 下开启PHP错误提示

    我也是傻逼,一直在找图片无法上传的原因,这么久了才意识到自己没有在Linux系统的服务器下开启错误提示. 正文 默认模式下的apache是没有开启错误语法提示的,修改php.ini文件.不同的安装,p ...

  4. Android Camera2采集摄像头原始数据并手动预览

    Android Camera2采集摄像头原始数据并手动预览 最近研究了一下android摄像头开发相关的技术,也看了Google提供的Camera2Basic调用示例,以及网上一部分代码,但都是在Te ...

  5. 【转】Linux方向职业分析

    引言: 据了解,Linux普通网络管理人员的月薪大约5000元左右,负责编程的Linux软件工程师月薪大约在8000元到12000元之间,Linux嵌入式软件开发人员的月薪大约在12000元以上. 影 ...

  6. PyCharm运行Nosetests并导出测试报告

    1. Pycharm运行Nosetests PyCharm可以使用两种方法,运行Nosetests测试文件: 1) 图形用户界面GUI a) 在PyCharm中,选中测试文件,如Tests/test_ ...

  7. Ubuntu14.04 命令行下安装teamviewer

    下载teamviewer 链接:https://pan.baidu.com/s/1hs0BppM  密码:sdmk 上传到 /home/[user] cd /home/[user] 移动安装包到 /o ...

  8. rtmp推流时间戳兼容问题

    一直用简单的librtmp或者其他开源推流实现方式.没有太关注细节问题.直到最近一次测试长时间推流.遇到了3字节时间戳溢出问题,即时间戳超过0xffffff,服务器断开. 复现方式:用yasea推流到 ...

  9. BZOJ 4503: 两个串 [FFT]

    4503: 两个串 题意:兔子们在玩两个串的游戏.给定两个只含小写字母的字符串S和T,兔子们想知道T在S中出现了几次, 分别在哪些位置出现.注意T中可能有"?"字符,这个字符可以匹 ...

  10. CF266D. BerDonalds [图的绝对中心]

    D. BerDonalds time limit per test 5 seconds memory limit per test 256 megabytes input standard input ...