第二期：如何經過知曉雲快速生成分享海報

做者：知曉雲 - 小程序開發快人一步
來源：知曉課堂

在小程序中生成分享海報是一個很常見的需求，目前主要有如下兩種作法：

1. 直接由前端生成，使用小程序提供的 canvas API
2. 由後端(知曉云云函數)生成，前端再獲取

本文將介紹經過知曉云云函數來生成分享海報的功能，並使用 webpack 和 mincloud 將代碼打包上傳到知曉雲。

技術棧：

• 代碼打包工具： webpack@4.22.0
• 部署工具：mincloud@1.0.4
• 圖片處理：gm@1.23.1
• 其餘：知曉雲 SDK、imageMagick（雲函數內置）

1、項目搭建

項目文件結構：

項目搭建與雲函數代碼打包示例文檔（公衆號回覆「打包」便可獲取）基本一致。項目搭建好後，還須要安裝如下依賴（兩種安裝方式選其一便可）：

修改 deploy 腳本，以下：

最終咱們會使用如下兩個命令來部署和測試：

2、生成海報

這裏分爲 4 個步驟：

• 下載海報須要的資源
• 圖片 / 文本處理
• 海報繪製
• 將繪製完成的海報上傳到知曉雲

使用知曉雲 Node SDK 的 request 方法將資源下載下來（不能直接使用其餘第三方 request 包）：

引入 gm 庫對圖片進行處理，雲函數沙箱環境已經內置 imageMagick 工具：

在處理文字的時候須要注意，設置字體時需選擇知曉雲已支持的字體，詳見文檔。

另外，這裏有一個 bug：在同一個圖層中，若是填充顏色以前有填充圖片操做，那麼後續填充的顏色將會不起做用。推薦的作法是若是有須要同時填充圖片以及填充顏色，建議將這兩個操做分開處理，最後再合成一張圖。

bug 示例以下:

下載圖片，圖片保存路徑需在 /tmp/ 路徑下：

上傳圖片到知曉雲：

完整代碼以下：

3、部署並測試

跟 npm 同樣，部署前須要先登陸，請參照文檔配置。

使用如下命令便可將雲函數部署到知曉雲：

執行結果以下：

使用如下的命令來測試：

執行結果以下：

上傳到知曉雲的圖片以下：

生成的海報效果圖：

素材原圖：

相關閱讀
第一期： 快速實現圖片爬蟲

關注「知曉雲」公衆號，點擊菜單欄「知曉雲」-「知曉課堂」，獲取更多開發教程。