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

小程序開(kāi)發(fā)者都希望自己的小程序得以廣泛傳播，因?yàn)椴簧傩〕绦蚨荚O(shè)計(jì)了很多轉(zhuǎn)發(fā)激勵(lì)行為，但分享小程序到朋友圈（或其他外部平臺(tái)）一直是一個(gè)難題。一個(gè)常見(jiàn)但方案就是生成分享海報(bào)、分享圖片。但生成分享圖片在技術(shù)上卻也是一個(gè)難題。

技術(shù)選型

目前常用技術(shù)方案基本分為三種：

1. 使用 canvas 繪圖并生成
2. 使用后端繪圖庫(kù)進(jìn)行繪制，返回給小程序端
3. 使用服務(wù)端開(kāi)一個(gè)瀏覽器進(jìn)行 HTML 渲染，并截圖返回給小程序端

第一種方案：要求較高，canvas 和純 html 布局相去甚遠(yuǎn)，零基礎(chǔ)學(xué)習(xí)成本較高，而且在不同的微信瀏覽器中效果不可預(yù)期，想短時(shí)間內(nèi)做出精美可控的生成圖片不容易。實(shí)操的時(shí)候發(fā)現(xiàn)了一個(gè)非常麻煩的事情：網(wǎng)絡(luò)圖片或者 base64 圖片都無(wú)法直接在 canvas 里渲染顯示，要先下載好傳進(jìn)去。

第二種方案：后端庫(kù)可以完成較為簡(jiǎn)單的需求，但字體加載、陰影、圓角、透明等方案效果需要精調(diào)，如果文字需要截?cái)嗷騽?dòng)態(tài)伸縮長(zhǎng)度時(shí)并不容易處理。圖片的截取和伸縮自適應(yīng)也不靈活。而且選用這種方案相當(dāng)于需要把 UI 布局的工作丟給后端工程師去解決，這不是他們擅長(zhǎng)的范圍，效果未必會(huì)好。

第三種方案：頁(yè)面的繪制方面，純前端技術(shù)即可完成，難度低，完成度高，但是需要在后端起一個(gè) node 服務(wù)開(kāi)啟 puppeteer 去控制服務(wù)端 Chrome 瀏覽器。這種方案的缺點(diǎn)就是成本太高，我們和業(yè)界同行都測(cè)算過(guò)，結(jié)果差不多：4 核 16G 的服務(wù)器生成圖片的 QPS 大概只有 10-20，相當(dāng)于一秒鐘較差情況只能生成 10 張圖片，這對(duì)于突發(fā)的大量分享需求并不能滿(mǎn)足，而且這種配置的服務(wù)器，不能部署其他服務(wù)，只跑這個(gè)服務(wù)就會(huì)用盡大部分資源。

費(fèi)用上：只單單算 5M 帶寬的服務(wù)器費(fèi)用一個(gè)月就要 700+ 人民幣，流量和圖片托管費(fèi)用另算。此方案的最小化實(shí)現(xiàn)：至少需要 1 核 2G 的服務(wù)器才能較為順暢地完成一次順利截圖，但是還是要處理瀏覽器無(wú)響應(yīng)假死等情況，較為復(fù)雜。但綜合來(lái)看，這種方案是效果最好最為靈活的。

快海報(bào)小程序分享圖生成服務(wù)

快海報(bào) kuaihaibao.com 是專(zhuān)門(mén)提供小程序分享海報(bào)生成服務(wù)的，技術(shù)上用的就是上面所述的第三種方案，但是只需要調(diào)用他的 API 就可以完成，不需要開(kāi)發(fā)者維護(hù) puppeteer 和 headless Chrome，而且成本較低，一張分享圖的最低生成成本是 0.033 元。

其實(shí)真正集成到自己的服務(wù)中時(shí)，平均成本要比這個(gè)低，因?yàn)橛行┥傻膱D片的二維碼，如果不帶用戶(hù)個(gè)人信息（不給分享的用戶(hù)返利）時(shí)，可以生成一次之后永久緩存起來(lái)，其他用戶(hù)再分享同一個(gè)東西都用緩存好的圖片，綜合成本就降下來(lái)了。

算一下成本：

• 比方說(shuō)一個(gè)剛起步的小程序日活 5000（對(duì)于剛起步的小程序其實(shí)已經(jīng)很高了吧）
• 假設(shè)有 5% 的用戶(hù)生成分享圖
• 也就是每天生成 250 張分享圖，一個(gè)月會(huì)生成 7500 張分享圖

這樣的話(huà)每個(gè)月成本就是 250 元人民幣左右，相比 700+ 人民幣但服務(wù)器成本省太多了。這是測(cè)算比較高的指標(biāo)，而且是完全不應(yīng)用緩存方案的情況。

如果你的小程序還處于冷啟動(dòng)的階段：

• 日活 500
• 假設(shè)有 5% 的用戶(hù)生成分享圖
• 也就是每天生成 25 張分享圖，一個(gè)月會(huì)生成 750 張分享圖

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

調(diào)用 API

首先去 https://kuaihaibao.com/ 注冊(cè)賬號(hào)，驗(yàn)證郵箱激活之后，其實(shí)就可以先測(cè)試用了，每個(gè)賬號(hào)有 100 次測(cè)試額度，測(cè)試生成的圖片帶水印。

網(wǎng)站左側(cè)的 [文檔] 頁(yè)面能找到集成文檔，非常簡(jiǎn)單，一共就只有一個(gè)核心 API，通過(guò) HTTP 調(diào)用的。

先在【開(kāi)發(fā)】->【設(shè)置】中激活 token

然后打開(kāi) 【開(kāi)發(fā)】->【模板】中，找到自己喜歡的模版。因?yàn)槲抑幌肷梢粋€(gè)簡(jiǎn)單的分享圖片，所以最簡(jiǎn)單的方式就是使用網(wǎng)站內(nèi)置的模版，內(nèi)置模板目前有 8 款，應(yīng)該能滿(mǎn)足大部分小程序的需求了，抽獎(jiǎng)、打卡、圖文、文字、電商都有，改一改文案和圖片就可以了。

我選了這個(gè)抽獎(jiǎng)模板：

按照 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": "我是測(cè)試賬號(hào)",
    "color": "#666"
  },
  "tip": "邀請(qǐng)你來(lái)抽獎(jiǎng)",
  "qrcode": "https://khb-sample.oss-cn-shanghai.aliyuncs.com/sample/sample_qr_0.png",
  "records": [
    {
      "title": "一等獎(jiǎng)",
      "desc": "2019 年 11 月 16 日 10:00 開(kāi)獎(jiǎng)",
      "image": "https://s3.cn-northwest-1.amazonaws.com.cn/res.weiyidan.com/production/10000002/4109f8e51a8f43b9816dbc8fe636e22a.jpeg"
    }
  ],
  "brand": "我的測(cè)試抽獎(jiǎng)小程序",
  "slogan": "快來(lái)和我一起抽吧！",
  "metaColor": "#999"
}

然后打開(kāi) Terminal 做一次請(qǐng)求試試：

curl -X "POST" "https://api.kuaihaibao.com/services/screenshot" \
     -H 'Authorization: Bearer 這里寫(xiě)你自己的 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": "一等獎(jiǎng)",
        "desc": "2019 年 11 月 16 日 10:00 開(kāi)獎(jiǎng)",
        "image": "https://s3.cn-northwest-1.amazonaws.com.cn/res.weiyidan.com/production/10000002/4109f8e51a8f43b9816dbc8fe636e22a.jpeg"
      }
    ],
    "tip": "邀請(qǐng)你來(lái)抽獎(jiǎng)",
    "slogan": "快來(lái)和我一起抽吧！",
    "metaColor": "#999",
    "brand": "我的測(cè)試抽獎(jiǎng)小程序",
    "backgroundImage": "",
    "backgroundColor": "#fafafa",
    "user": {
      "avatar": "https://khb-sample.oss-cn-shanghai.aliyuncs.com/sample/girl_2.jpg",
      "nickname": "我是測(cè)試賬號(hào)",
      "color": "#666"
    }
  }
}'

返回了結(jié)果：

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

打開(kāi)圖片地址看看：

速度很快，圖片很漂亮，只是中間帶水印，充值后成為付費(fèi)用戶(hù)，再生成的圖片水印就自動(dòng)取掉了。

后端集成

這里參考快海報(bào)官方給的最佳實(shí)踐的邏輯參考圖：

所以后端只需要做一件事，就是提供一個(gè) API 給客戶(hù)端用，這個(gè) API 被調(diào)用的時(shí)候去請(qǐng)求快海報(bào)的服務(wù)器，再把結(jié)果返回給小程序就好了。

本頁(yè)內(nèi)容由塔燈網(wǎng)絡(luò)科技有限公司通過(guò)網(wǎng)絡(luò)收集編輯所得，所有資料僅供用戶(hù)學(xué)習(xí)參考，本站不擁有所有權(quán)，如您認(rèn)為本網(wǎng)頁(yè)中由涉嫌抄襲的內(nèi)容，請(qǐng)及時(shí)與我們聯(lián)系，并提供相關(guān)證據(jù)，工作人員會(huì)在5工作日內(nèi)聯(lián)系您，一經(jīng)查實(shí)，本站立刻刪除侵權(quán)內(nèi)容。本文鏈接:http://www.junxiaosheng.cn/25250.html