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

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

效果图

这个需求乍一听起来并没有什么问题，只要看下小程序画布API就可以，但是实际上遇到的问题我花费两个晚上才基本解决，而且还有一个至今无法解决的问题也希望大家给出宝贵建议!

知道大家不喜欢墨迹，我先上完整代码，如果大家着急需要，直接过去拿代码就可以了，里面注释很丰富！如果可以希望大家给文章点个赞，码农不易感谢支持！

GitHub - BaoYuHan/applet-canvas-image: 微信小程序使用canvas图片合成案例及相关踩坑处理

如果各位同学感兴趣，那可以往下看我的思路流程和踩坑记录、注意事项……

思路流程图：

思路流程图

坑：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是异步的而且还需要耗费时间。但是在我开发中我发现去掉了也是没有问题的，可能是官方补充了这里的逻辑？

未实现问题：wx.previewImage 预览合成的图片，点击发送给朋友或保存图片，图片圆角剩余部分是黑色的，如果有能解决的小伙伴欢迎评论！

感谢文章：

1.图片裁剪：微信小程序 画布drawImage实现图片截取 - Favour丶in - 博客园

2.图片圆角：canvas图片圆角处理