小程序生成圖片分享朋友圈

小程序生成圖片分享朋友圈

小程序開發者都但願本身的小程序得以普遍傳播，由於很多小程序都設計了不少轉發激勵行爲，但分享小程序到朋友圈（或其餘外部平臺）一直是一個難題。一個常見但方案就是生成分享海報、分享圖片。但生成分享圖片在技術上卻也是一個難題。

---

技術選型

目前經常使用技術方案基本分爲三種：

1. 使用 canvas 繪圖並生成
2. 使用後端繪圖庫進行繪製，返回給小程序端
3. 使用服務端開一個瀏覽器進行 HTML 渲染，並截圖返回給小程序端

第一種方案：要求較高，canvas 和純 html 佈局相去甚遠，零基礎學習成本較高，並且在不一樣的微信瀏覽器中效果不可預期，想短期內作出精美可控的生成圖片不容易。實操的時候發現了一個很是麻煩的事情：網絡圖片或者 base64 圖片都沒法直接在 canvas 裏渲染顯示，要先下載好傳進去。

第二種方案：後端庫能夠完成較爲簡單的需求，但字體加載、陰影、圓角、透明等方案效果須要精調，若是文字須要截斷或動態伸縮長度時並不容易處理。圖片的截取和伸縮自適應也不靈活。並且選用這種方案至關於須要把 UI 佈局的工做丟給後端工程師去解決，這不是他們擅長的範圍，效果未必會好。

第三種方案：頁面的繪製方面，純前端技術便可完成，難度低，完成度高，可是須要在後端起一個 node 服務開啓 puppeteer 去控制服務端 Chrome 瀏覽器。這種方案的缺點就是成本過高，咱們和業界同行都測算過，結果差很少：4 核 16G 的服務器生成圖片的 QPS 大概只有 10-20，至關於一秒鐘較差狀況只能生成 10 張圖片，這對於突發的大量分享需求並不能知足，並且這種配置的服務器，不能部署其餘服務，只跑這個服務就會用盡大部分資源。

費用上：只單單算 5M 帶寬的服務器費用一個月就要 700+ 人民幣，流量和圖片託管費用另算。此方案的最小化實現：至少須要 1 核 2G 的服務器才能較爲順暢地完成一次順利截圖，可是仍是要處理瀏覽器無響應假死等狀況，較爲複雜。但綜合來看，這種方案是效果最好最爲靈活的。

快海報小程序分享圖生成服務

快海報 kuaihaibao.com 是專門提供小程序分享海報生成服務的，技術上用的就是上面所述的第三種方案，可是隻須要調用他的 API 就能夠完成，不須要開發者維護 puppeteer 和 headless Chrome，並且成本較低，一張分享圖的最低生成成本是 0.033 元。

其實真正集成到本身的服務中時，平均成本要比這個低，由於有些生成的圖片的二維碼，若是不帶用戶我的信息（不給分享的用戶返利）時，能夠生成一次以後永久緩存起來，其餘用戶再分享同一個東西都用緩存好的圖片，綜合成本就降下來了。

算一下成本：

• 比方說一個剛起步的小程序日活 5000（對於剛起步的小程序其實已經很高了吧）
• 假設有 5% 的用戶生成分享圖
• 也就是天天生成 250 張分享圖，一個月會生成 7500 張分享圖

這樣的話每月成本就是 250 元人民幣左右，相比 700+ 人民幣但服務器成本省太多了。這是測算比較高的指標，並且是徹底不該用緩存方案的狀況。

若是你的小程序還處於冷啓動的階段：

• 日活 500
• 假設有 5% 的用戶生成分享圖
• 也就是天天生成 25 張分享圖，一個月會生成 750 張分享圖

每個月成本 25 元。比 1 核 2G 的最小化自部署方案也要便宜。但帶來的收益是無窮的，750 張分享圖發到朋友圈，每張分享圖 1000 受衆瀏覽，一個月就是將近 750000 人次分享受衆。

調用 API

首先去 https://kuaihaibao.com/ 註冊帳號，驗證郵箱激活以後，其實就能夠先測試用了，每一個帳號有 100 次測試額度，測試生成的圖片帶水印。

網站左側的 [文檔] 頁面能找到集成文檔，很是簡單，一共就只有一個核心 API，經過 HTTP 調用的。

先在【開發】->【設置】中激活 token

而後打開 【開發】->【模板】中，找到本身喜歡的模版。由於我只想生成一個簡單的分享圖片，因此最簡單的方式就是使用網站內置的模版，內置模板目前有 8 款，應該能知足大部分小程序的需求了，抽獎、打卡、圖文、文字、電商都有，改一改文案和圖片就能夠了。

我選了這個抽獎模板：

按照 https://kuaihaibao.com/doc/docs/template/kzccda95.html 文檔描述的 JSON 改爲我須要的：

{
  "backgroundColor": "#fafafa",
  "backgroundImage": "",
  "user": {
    "avatar": "https://khb-sample.oss-cn-shanghai.aliyuncs.com/sample/girl_2.jpg",
    "nickname": "我是測試帳號",
    "color": "#666"
  },
  "tip": "邀請你來抽獎",
  "qrcode": "https://khb-sample.oss-cn-shanghai.aliyuncs.com/sample/sample_qr_0.png",
  "records": [
    {
      "title": "一等獎",
      "desc": "2019 年 11 月 16 日 10:00 開獎",
      "image": "https://s3.cn-northwest-1.amazonaws.com.cn/res.weiyidan.com/production/10000002/4109f8e51a8f43b9816dbc8fe636e22a.jpeg"
    }
  ],
  "brand": "個人測試抽獎小程序",
  "slogan": "快來和我一塊兒抽吧！",
  "metaColor": "#999"
}

而後打開 Terminal 作一次請求試試：

curl -X "POST" "https://api.kuaihaibao.com/services/screenshot" \
     -H 'Authorization: Bearer 這裏寫你本身的 token' \
     -H 'Content-Type: application/json; charset=utf-8' \
     -d /pre>{
  "template": "kzccda95",
  "data": {
    "qrcode": "https://khb-sample.oss-cn-shanghai.aliyuncs.com/sample/sample_qr_0.png",
    "records": [
      {
        "title": "一等獎",
        "desc": "2019 年 11 月 16 日 10:00 開獎",
        "image": "https://s3.cn-northwest-1.amazonaws.com.cn/res.weiyidan.com/production/10000002/4109f8e51a8f43b9816dbc8fe636e22a.jpeg"
      }
    ],
    "tip": "邀請你來抽獎",
    "slogan": "快來和我一塊兒抽吧！",
    "metaColor": "#999",
    "brand": "個人測試抽獎小程序",
    "backgroundImage": "",
    "backgroundColor": "#fafafa",
    "user": {
      "avatar": "https://khb-sample.oss-cn-shanghai.aliyuncs.com/sample/girl_2.jpg",
      "nickname": "我是測試帳號",
      "color": "#666"
    }
  }
}'

返回告終果：

{
  "success": true,
  "data": {
    "name": "iPhone 5",
    "image": "https://khb-test-oss.oss-cn-shanghai.aliyuncs.com/screenshot/4fa63f2a3605cbdece90c659cbccea619d9cf9fa?x-oss-process=style/test_watermark"
  }
}

打開圖片地址看看：

速度很快，圖片很漂亮，只是中間帶水印，充值後成爲付費用戶，再生成的圖片水印就自動取掉了。

後端集成

這裏參考快海報官方給的最佳實踐的邏輯參考圖：

因此後端只須要作一件事，就是提供一個 API 給客戶端用，這個 API 被調用的時候去請求快海報的服務器，再把結果返回給小程序就行了。