小程序-图片导出

经常开发和使用小程序的同学对这个功能一定不陌生，这是一种常见的引流方式，一般同时会在图片中附加一个小程序二维码。

基本原理

  1. 借助 canvas 元素，将需要导出的样式首先在 canvas 画布上绘制出来 （api基本和h5保持一致，但有轻微差异，使用时注意即可）

  2. 借助微信提供的 canvasToTempFilePath 导出图片，最后再使用 saveImageToPhotosAlbum （需要授权）保存图片到本地

如何优雅实现

根据上述的原理来看，实现是很简单的，只不过就是设计稿的提取，绘制即可，但是作为一个常用功能，每次都这样写一坨代码岂不是非常的难受。那小程序如何设计一个通用的方法来帮助我们导出图片呢？思路如下：

  1. 绘制出需要的样式这一步是省略不掉的。但是我们可以封装一个绘制库，包含常见图形的绘制，例如矩形，圆角矩形，圆， 扇形， 三角形， 文字，图片减少绘制代码，只需要提炼出样式信息，便可以轻松的绘制，最后导出图片存入相册。笔者觉得以下这种方式绘制更为优雅清晰一些，其实也可以使用加入一个type参数来指定绘制类型，传入的一个是样式数组，实现绘制。

  2. 结合上一步的实现，如果对于同一类型的卡片有多次导出需求的场景，也可以使用自定义组件的方式，封装同一类型的卡片为一个通用组件，在需要导出图片功能的地方，引入该组件即可。

  2.   class CanvasKit {
  3.     constructor() {
  4.     }
  5.     drawImg(option = {}) {
  6.       ...
  7.       return this
  8.     }
  9.     drawRect(option = {}) {
  10.       return this
  11.     }
  12.     drawText(option = {}) {
  13.       ...
  14.       return this
  15.     }
  16.     static exportImg(option = {}) {
  17.       ...
  18.     }
  19.   }
  21.   let drawer = new CanvasKit('canvasId').drawImg(styleObj1).drawText(styleObj2)
  22.   drawer.exportImg()

注意事项

  1. 小程序中无法绘制网络图片到canvas上，需要通过downLoadFile 先下载图片到本地临时文件才可以绘制
  2. 通常需要绘制二维码到导出的图片上，有一种方式导出二维码时，需要携带的参数必须做编码，而且有具体的长度（32可见字符）限制，可以借助服务端生成 短链接 的方式来解决