微信小程序 drawImage 问题
好久没写了,其实可写的还是挺多,主要还是懒吧...
最近公司项目使用小程序做序列帧动画,大概有 116 张图,共9.6M。
比较闲的日子里实验了一番,主要有以下几种方法,
1. css background-image + animation
2. css background-position + animation
3. js background-image
4. js background-position
5. js img src
6. canvas drawImage
结果当然是 canvas 性能最优咯,不会出现掉帧和卡屏的情况,其中最不推荐第一种
所以这次项目也就准备尝试下微信小程序的 canvas 会不会有别样的风味
基本上和 html 的 canvas 区别不大,方法名略有不同,再就是需要一个 draw 方法才会绘制。
canvas.getContext('2d') 等于 wx.createCanvasContext(canvas)。
一般 wx.createCanvasContext 放在 onReady 还是 onShow 并没有什么区别(手里机型太少,没试太多)
接着就开始了填坑之路:
1. Image 对象问题,只需直接使用图片路径
官方案例给的是 wx.chooseImage 返回的缓存文件,显然不是我们要的;
在 html 中如果想 drawImage 那就需要一个 Image 对象,需要先 new Image() 或者获取到 dom 中的 <img>,
那么小程序该怎么办呢,我略一沉凝,准备试它一下,直接使用了图片路径,
ctx = ctx ? ctx : wx.createCanvasContext('imgs');
url = 'https://sum.kdcer.com/test/sw_shake/0/0 (1).jpg';
ctx.drawImage(url, 0, 0, 300, 500); // 直接使用图片路径
ctx.darw()
唔,非常美妙,调试器上是正常的。url 为相对路径也是可以的。
当然,这个时候预加载就是个问题,只能在 wxml 中去 for 出所有的图片并 bindload 了
2. 图片路径不能有特殊符号
上面的情况虽然调试器通了,但手机预览时还是没有任何图片绘制上去呀(其他点线绘制是存在的)。
然后去博客寻找了番,开始我是怀疑可能直接使用图片路径是不支持这种远程资源的(仅能用小程序内部的相对路径)。
于是我采用了 downloadFile 这种方法再次尝试。
wx.downloadFile({url: url,success: function (res) {ctx.drawImage(res.tempFilePath, 0, 0, 300, 500);ctx.draw();}
})
结果返回给我的 res.tempFilePath 是个 .htm 结尾的文件,报出 http 400(请求无效)的错误。
我怀疑问题出在了文件本身,于是我改了下文件名,由 0 (1).jpg 改为 1.jpg,就能正常访问了。
后来进行了一些实验,暂时还只发现了 空格+括号 这一种命名会失败。
drawImage 如果直接使用图片路径其实是可以访问远程资源的,只是加载的慢,图片异步没法绘制上去了。
所以更为推荐使用 downloadFile 这种方式来先加载图片再绘制。
比较坑的是,downloadFile 不能下载相对路径的图片,这让我想优化把一部分图片放进小程序变得无比麻烦(其实2M资源放进去小程序就会变得非常卡)。
3. downloadFile 文件数限制
官方表示,downloadFile 这个 api 最大并发限制为 10 个,
意味着直接 for 个 116 下是会报错的。
因此需要换用为递归的方式去预加载图片。
我写的递归不见得都适用,就不放出来了,应该没什么难点的。
(推荐先用 html 写通递归,不然小程序编辑器死循环了很扎心)
4. downloadFile 合法域名的配置
开发完成后出现了小程序仅有打开了调试工具才能正常运行的情况,
后来经过同事点拨,原来还要设置 downloadFile 的合法域名,这个修改就简单了。
每个月只能修改 5 次的限制应该不会造成什么影响。
5. requestAnimationFrame 问题
为了更好的动画优化,当然少不了 requestAnimationFrame 的存在。
然而,安卓机的小程序是有的,苹果机小程序却根本没有这个方法。
好在我们可以写段回退兼容,放在 Page 的外面。
if (typeof requestAnimationFrame == 'undefined') {var lastTime = 0;var requestAnimationFrame = function (callback) {var currTime = new Date().getTime();var timeToCall = Math.max(0, 16 - (currTime - lastTime));var id = setTimeout(function () { callback(currTime + timeToCall); }, timeToCall);lastTime = currTime + timeToCall;return id;};
}
if (typeof cancelAnimationFrame == 'undefined') {var cancelAnimationFrame = function (id) {clearTimeout(id);};
}
6. fps 性能问题
小程序一直吹嘘着接近原生的流畅体验,但这次帧动画的项目中显然打脸了。
html 版的 canvas 每 15ms 绘制一次都是小 case,但小程序则需要 50ms 以上的间隔。否则会出现间断性白屏。
60fps 和 20fps 虽然在 html 中有很大差距,但在小程序中 20fps 并没有太影响用户的浏览体验。
毕竟 js 的运算和 webview 的通信本身就不是多快的一件事,而如果单单只考虑 webview 和 html 的话那当然有差距。
总的来说,填坑的路是比较烦人的,
后一个问题解决了又开始想,是不是前一个问题其实本来是对的,然后又回去重来一遍,
最后的最后,来来回回,才能彻底填平这个坑。
转载于:https://www.cnblogs.com/foreverZ/p/7365271.html
微信小程序 drawImage 问题相关推荐
- 微信小程序canvas画布新接口type为2D时drawImage方法的使用以及注意事项
微信小程序canvas画布自2.9.0 起支持一套新 Canvas 2D 接口(需指定 type 属性),但文档不全,从原canvas的api转变到新的api时遇到不少问题,现将新版与旧版的画布载入图 ...
- java drawimage图片不完整_微信小程序canvas.drawImage完全显示图片问题的解决
问题描述 问题产生 对于微信小程序,canvas处理过程中,dramImage默认图片引用是有残缺的 导入初始项目 打开链接(原官网例子),浏览器唤醒微信开发这工具,打开连接之前需要下载好微信开发者工 ...
- 微信小程序 Canvas drawImage()绘图头像二维码 安卓用户显示半透明!
微信小程序 Canvas drawImage() 图片在安卓显示为半透明 我遇到的是drawImage()方法绘制 头像和二维码 时开发工具测试没问题 真机测试则出现以下样式 具体问题不太清楚,有可能 ...
- 微信小程序分享到朋友圈-遇到的问题drawImage真机不显示网络图片
网上有现成的例子,所以直接拿来用了,见链接,接下来说下自己遇到的问题 -> 因为在我的项目中,我的图片是网络图片,canvas上绘制的目前只支持本地图片,那应该怎么办呢?不可能图 ...
- 【微信小程序之画布】四:手指触摸绘波浪线
微信小程序开发交流qq群 173683895 承接微信小程序开发.扫码加微信. 正文: 功能:根据手指触摸绘画一条直线路径--> 起点为手指开始触摸时的坐标,终点为手指触摸结束时的坐标 ...
- 微信小程序朋友圈分享图片生成方案实现
在小程序界里,生成图片分享到朋友圈这个功能,是如此得光芒耀眼,以至于各个小程序都趋之若鹜地前来跪倒在她的石榴裙下.不幸的是,微信爸爸并没有提供给我们很好很便捷的相关工具:恰恰相反,屏幕截屏的功能被残忍 ...
- 微信小程序之生成图片保存到相册
微信小程序之生成图片保存到相册 需求概要 电商项目中需要将自己小店的商品带上自己的小程序码生成海报,保存到本地,然后分享到万能的朋友圈,QQ空间,微博等等来广而告之- 如下图,三种海报格式轮播展示,左 ...
- Canvas绘图在微信小程序中的应用:生成个性化海报
Canvas绘图在微信小程序中的应用:生成个性化海报 如极客时间的一些实现案例: 基础语法 Canvas本质是一个可以使用脚本(通常为JavaScript)来绘制图形的 HTML 元素,默认大小为30 ...
- 微信小程序业务-字符串生成二维码(weapp-qrcode)
微信小程序业务-字符串生成二维码(weapp-qrcode) 前言 邂逅weapp-qrcode 基本使用 详细参数 小程序组件中使用 image属性详解 想使用网络图片? 参考地址 前言 在小程序项 ...
最新文章
- 为什么有些老板要注册很多家公司
- 阿里云下Linux服务器安装Redis
- 基于LBS的热点店铺搜索
- 程序员面试系列——插入排序
- MMS发送的无线网络连接协议分析
- 0-安装Vagrant和使用
- python分解word文档为多个_用python批量处理word文档
- Python简单的拼写检查
- XOS 源码详解2: os_s_xxxx.s 汇编代码的段定义AREA,程序入口ENTRY,程序结尾END.
- flask 返回json_flask中request.json做了什么
- Finders Keepers-freecodecamp算法题目
- Object_clone
- 学习jQuery之旅--新手必须知道的常用方法
- restapi(3)- MongoDBEngine : MongoDB Scala编程工具库
- Git环境配置(案例:clone bert源码到本地仓库)
- 为用户增加sudo权限(修改sudoers文件)
- 八大排序算法-java实现
- 收集的一些FLASHRIA作品集(附源文件下载)
- js中 json对象与json字符串相互转换的几种方式
- Azide连接的不同基团Azide-NHS Ester/BDP FL/diSulfo/Pyrene