小程序开发指南：图片导出及注意事项

经常开发和使用小程序的同学一定对这个功能很熟悉。这是一种常见的吸引流量的方式。一般情况下，图片上会附有小程序二维码。 。

基本原理

1. 借助Canvas元素，导出的样式首先绘制在Canvas

canvas上，有细微差别，请小心使用时间）

如何优雅地实现

从以上原理来看，实现非常简单。它只涉及提取设计稿并绘制它。不过，作为一个通用函数，每次都写一些这样的代码也不会很不舒服。那么小程序如何设计一个通用的方法来导出我们的图片呢？思路如下：

1. 绘制所需样式这一步不能省略。但我们可以采用一个包含常见图形绘制的绘图库，例如矩形、圆角矩形、圆形、扇形、三角形、文本和图像，以减少绘图代码。我们只需要提取样式信息方便绘图，最后导出图像即可。保存在相册中。笔者认为下面的画法更加优雅、清晰。事实上，您还可以添加类型参数来指定绘图类型。传入的是一个样式数组，用于实现绘图。
2. 结合上一步的实现，如果同一个地图类型有多个导出需求，也可以使用自定义组件将同一张地图封装成通用组件。需要图片导出功能的地方，指定该组件即可。

    
  class CanvasKit {
    constructor() {
    }
    drawImg(option = {}) {
      ...
      return this
    }
    drawRect(option = {}) {
      return this
    }
    drawText(option = {}) {
      ...
      return this
    }
    static exportImg(option = {}) {
      ...
    }
  }

  let drawer = new CanvasKit('canvasId').drawImg(styleObj1).drawText(styleObj2)
  drawer.exportImg()

复制代码

注意

1. 小程序中无法将网络图片绘制到画布上。需要通过DownLoadFile将图片下载到本地临时文件后才能拖动
2. 通常需要在导出的图片上拖动二维码。有一种方法。这可以通过使用服务器短链接