【实战教程】在小程序中快速生成分享海报

在小程序中生成分享海报是一个很常见的需求，目前主要有以下两种做法：

直接由前端生成，使用小程序提供的 canvas API

由后端知晓云「云函数」生成，前端再获取

本文将介绍通过知晓云「云函数」来生成分享海报的功能，并使用 webpack 和 mincloud 将代码打包上传到知晓云。

技术栈：

代码打包工具： webpack@4.22.0

部署工具：mincloud@1.0.4

图片处理：gm@1.23.1

其他：知晓云 SDK、imageMagick（云函数内置）

一、项目搭建

项目文件结构：

  gm-draw-image
  ├── index.js
  ├── package.json
  ├── src
  │   └── index.js
  ├── webpack.config.js
  └── yarn.lock

项目搭建与云函数代码打包示例文档基本一致。项目搭建好后，还需要安装以下依赖（两种安装方式选其一即可）：

// 使用 yarn 安装
yarn add gm mincloud

// 使用 npm 安装
npm install --save gm mincloud

修改 deploy 脚本，如下：

// package.json
...
"scripts": {
   "build": "webpack --mode production",
   "predeploy": "npm run build"，
   "deploy": "mincloud deploy gm-draw-image ../"
},
...

最终我们会使用以下两个命令来部署和测试：

npm run deploy  // 部署到知晓云
mincloud invoke gm-draw-image  // 测试已经部署到知晓云上的云函数

二、生成海报

这里分为 4 个步骤：

• 下载海报需要的资