钉钉小程序通过 Canvas 将页面生成图片并保存到本地相册

背景

最近公司有个账户充值业务场景需要从线下支付迁移到线上支付：

• 线下支付场景：客户通过 POS 机付款或者扫码销售同学提供的付款二维码进行付款来完成支付，之后销售同学将相关信息录入到 CRM 后台，财务审核通过后才正式完成充值流程。
• 线上支付场景：销售同学先在 CRM 钉钉小程序中录入充值信息后生成订单，然后系统生成支付宝或者微信付款码，销售同学将付款码页面生成的图片发送给客户，客户付款后即完成充值流程。

整个充值流程优化上线后，大大缩短了客户账户从充值付款到充值到账的时间，明显提高了给客户账户充值的效率。

需求分析

本次迭代功能的小程序是使用原生钉钉语言开发的小程序，至于为什么是原生语言开发，那是历史原因了，不在本文讨论范围，原生语言开发体验明显没有使用了 uni-app、taro 等小程序框架的开发体验好，刚接手时还需要一边查文档一边开发，效率比较低。

要实现线上支付功能，要解决的关键问题有以下两个：

• 后端接口返回给小程序的是微信或支付宝的支付链接，小程序需要将它转成二维码显示到页面上
• 页面上除了付款二维码，还有公司 logo，客户信息，付款金额等需要生成图片的信息，点击页面底部的保存图片按钮后，将上述信息生成图片并保存到本地相册

综合以上两步，实现需求在技术上要解决的问题包括以下几点：

1. 使用 Canvas 将链接转成二维码,显示到页面上，可以借助一个第三方库 weapp-qrcode 来实现，这个库是给微信小程序使用的，但钉钉小程序里也可以使用，需要改下源码
2. 将整个页面的元素画到另一个 Canvas 上，但问题是如何将二维码 Canvas 画到另一个 Canvas 上呢，这一点开发时有遇到坑，后面会说， 本次我是采用了个小技巧，保存图片时，先使用 toTempFilePath 将二维码 Canvas 转成临时图片，然后画到另一个 Canvas 上，再使用 toTempFilePath 将另一个 Canvas 转成临时图片，最后使用 dd.saveImage 将临时图片保存到本地相册
3. 小程序 Canvas 里面内容的自适应

技术实现

页面实现

	<view class="container">
            // 省略一些代码
            <canvas canvas-id="myQrCode" id="myQrCode" class="pay-code"></canvas>
            // 省略一些代码
	</view>
</view>

最终效果如下：