第二期：如何通过知晓云快速生成分享海报

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

已注册用户请登录

这是一个创建于 1551 天前的主题，其中的信息可能已经有所发展或是发生改变。

作者：知晓云 - 小程序开发快人一步来源：知晓课堂

本文会跟大家介绍，如何在本地使用知晓云云函数 API 与 cheerio 开发一个图片爬虫，并使用 webpack 与 mincloud 将代码打包并上传部署到知晓云。在小程序中生成分享海报是一个很常见的需求，目前主要有以下两种做法：

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

由后端(知晓云云函数)生成，前端再获取

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

技术栈：

一、项目搭建

项目文件结构：

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

修改 deploy 脚本，如下：

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

这里分为 4 个步骤：

使用知晓云 Node SDK 的 request 方法将资源下载下来（不能直接使用其他第三方 request 包）：

引入 gm 库对图片进行处理，云函数沙箱环境已经内置 imageMagick 工具：

在处理文字的时候需要注意，设置字体时需选择知晓云已支持的字体，详见文档。

另外，这里有一个 bug：在同一个图层中，如果填充颜色之前有填充图片操作，那么后续填充的颜色将会不起作用。推荐的做法是如果有需要同时填充图片以及填充颜色，建议将这两个操作分开处理，最后再合成一张图。

bug 示例如下:

下载图片，图片保存路径需在 /tmp/ 路径下：

上传图片到知晓云：

完整代码如下：

跟 npm 一样，部署前需要先登录，请参照文档配置。

使用以下命令即可将云函数部署到知晓云：

执行结果如下：

使用以下的命令来测试：

执行结果如下：

上传到知晓云的图片如下：

生成的海报效果图：

素材原图：