快速生成分享海报

知晓云 - 小晓云发表于:2019年05月24日 18:35:04更新于:2019年05月24日 18:49:33

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

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

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


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

技术栈:

  • 代码打包工具: webpack@4.22.0

  • 部署工具:mincloud@1.0.4

  • 图片处理:gm@1.23.1

  • 其他:知晓云 SDK、imageMagick(云函数内置)


一、项目搭建

项目文件结构:

1gbu7wrNyMfxiAhg.png

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

1gbu86hmoqUTW8nX.png

修改 deploy 脚本,如下:

1gbu8DsnNHW5yXOM.png

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

1gbu9SQ0pjfoatp6.png


二、生成海报

这里分为 4 个步骤:

  • 下载海报需要的资源

  • 图片 / 文本处理

  • 海报绘制

  • 将绘制完成的海报上传到知晓云

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

1gbu9x3Mh5W0BKDh.png

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

1gbuACDAl9mT1eRr.png

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

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

bug 示例如下:

1gbuANxSiKl8nZBT.png

下载图片,图片保存路径需在 /tmp/ 路径下:

1gbuB2iaoN8drAXW.png

上传图片到知晓云:

1gbuBCkcMdKfdDyo.png

完整代码如下:

1gbuAhw7tBIqf4c0.png

1gbuBPtKDH3bvajq.png


三、部署并测试

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

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

1gbuBc4ksg47IS51.png

执行结果如下:

1gbuC3MRgbsZubdm.png

使用以下的命令来测试:

1gbuBkoUivjeLFM1.png

执行结果如下:

1gbuCRWtaKW3ymp9.png

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

1gbuCdkjb6jo3Qul.png

生成的海报效果图:

1gbuCkj76lCtimGb.png


素材原图:

1gbuCsXl3uY4OuIi.png


知晓云-小程序开发快人一步
    您需要登录后才可以回复