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

近期公司项目中有一个定制卡封面需求，是将几张图片融合成一张，并可以切换卡片横竖版的效果。

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

坑：canvas的隐藏问题：
对于切换横竖屏时隐藏相应的canvas这个实现，首先大家想到的肯定是wx:if，但是很遗憾，并不好使，网上查阅相关资料后发现可以添加一个父盒子宽高0+overflow:hidden，模拟器完美运行，跑到真机上还是无效。最后发现大家都是用了一个终极办法，那就是送他离开千里之外~的position:fixed+left:10000px让canvas在不该用户看到的时候滚出屏幕
 
注意点1：用户操作：用一张能铺满canvas的图片合成，后再次点击选择图片，用一张不能铺满canvas的图片合成
我这里