您现在的位置: 微信小程序 > 微信小程序运营 > 经验 >

微信小程序canvas图片融合及画布隐藏问题记录

来源:微信小程序 编辑:Yiyongtong.com 发布时间:2020-05-18 11:04热度:
近期公司项目中有一个定制卡封面需求,是将几张图片融合成一张,并可以切换卡片横竖版的效果,最终需求如图:

 
这个需求乍一听起来并没有什么问题,只要看下小程序画布API就可以,但是实际上遇到的问题我花费两个晚上才基本解决,而且还有一个至今无法解决的问题也希望大家给出宝贵建议!
 
知道大家不喜欢墨迹,我先上完整代码,如果大家着急需要,直接过去拿代码就可以了,里面注释很丰富!如果可以希望大家给文章点个赞,码农不易感谢支持!
 
如果各位同学感兴趣,那可以往下看我的思路流程和踩坑记录、注意事项……
 
思路流程图:

 
坑:canvas的隐藏问题:
对于切换横竖屏时隐藏相应的canvas这个实现,首先大家想到的肯定是wx:if,但是很遗憾,并不好使,网上查阅相关资料后发现可以添加一个父盒子宽高0+overflow:hidden,模拟器完美运行,跑到真机上还是无效。最后发现大家都是用了一个终极办法,那就是送他离开千里之外~的position:fixed+left:10000px让canvas在不该用户看到的时候滚出屏幕
 
注意点1:用户操作:用一张能铺满canvas的图片合成,后再次点击选择图片,用一张不能铺满canvas的图片合成
我这里的图片裁剪,模拟的是aspectFill模式,保证短边完全显示,长边裁剪,可能会出现图片不能铺满屏幕的情况,这时候如果用户复现上述操作,没铺满的剩余空间会显示上次绘制的内容,体验很不好。所以要在用户选择图片成功后,注意是成功,调用ctx.draw()使用填充色绘制一遍,即清空canvas
 
注意点2:不需要处理图片裁剪以及不使用网络图片的同学可以不用wx.getImageInfo
我的代码中使用了wx.getImageInfo用于获取图片信息来裁剪图片,不需要的同学可以直接在用户选择图片后就开始绘制,但是注意小程序中canvas.drawImage不能使用网络图片,网络图片要通过 getImageInfo / downloadFile 先下载到本地并获取路径后才能绘制
 
注意点3:绘制圆角后,再绘制文字前注意设置填充色
我们这里绘制圆角的原理是将画布裁剪四个弧形角,后面的内容都在这个圆角矩形中绘制,绘制圆角矩形时使用了ctx.setFillStyle('transparent'),防止图片出现圆弧有溢出颜色的情况,所以圆角矩形绘制完后注意恢复填充色,否则文字无法绘制了。
 
注意点4:wx.canvasToTempFilePath获取失败问题
1:fail回调:官网文档说明:在 draw() 回调里调用该方法才能保证图片导出成功。
 
2. 以往的写法需要在执行 wx.canvasToTempFilePath之前开启一个一秒的计时器,因为生成canvas是异步的而且还需要耗费时间。但是在我开发中我发现去掉了也是没有问题的,可能是官方补充了这里的逻辑?