小程序「分享圖」生成難？一招教你輕鬆解決

知曉程序註：

許多小程序，都提供了「分享卡片」功能。

但許多開發者會遇到「如何處理分享卡片圖片」的難題：

在伺服器端處理，容易遇到伺服器資源不足的問題。

利用小程序 Canvas 組件，容易遇到 bug。

如果你也有同樣煩惱，那麼知曉程序（微信號 zxcx0101）今天分享的「製作器」小程序的開發者 charliesong 這篇文章，也許會為你提供一個不一樣的思路。

文 | charliesong

使用過「製作器」小程序的用戶，都知道它會有一個紅包照片功能。利用它，小程序可以生成帶小程序碼、用戶頭像和模糊圖片的分享卡片。

就像這樣：

最開始，我們是通過伺服器端 GD 庫，來實現卡片製作。但是這種方式，會佔用許多伺服器的資源，而且在並發高的時候，伺服器的帶寬和 CPU 都不夠用。

到後來，我考慮使用小程序客戶端的 canvas 功能，來實現圖片的處理。但是，我發現小程序 canvas 組件的問題很多——真的不是一般的多啊。

例如，在 iOS 上都能正常生成的分享卡片，到了某些 Android 手機上，經常會出現生成圖片不正常的問題。甚至某款手機，在絕大部分情況下，會出現這樣的結果：

按正常情況，通過 canvas 所生成的圖片，應該是這樣的：

花了很多時間，也聯繫過官方的人，也沒找到具體原因。最後，我不得不暫時放棄了這個功能的研究。

某天，我突然靈機一動：為什麼不通過雲服務中的自動水印功能，來實現圖片的自動處理呢？

處理方法也很簡單。

首先，在七牛雲存儲空間中，放入一張純白色的底圖。

將經過高斯處理的圖片、文字，配合一些視覺元素，將其作為「水印」，打在作為「原圖」的白色底圖上。

需要注意的是，所有元素生成的位置，都需要你自己弄清楚、設定好，否則，出來的卡片效果就會錯位。

有關「水印」功能的詳細用法，可以閱讀雲服務的開發文檔。

另外一個問題是，分享卡片裡面的小程序 LOGO，是怎樣被替換為用戶頭像呢？其實就是在正方形頭像上，疊加了一張圓形蒙版圖片。

圖片中間是個圓形，背景透明。將它疊加到頭像上，頭像就會出現圓形效果了。

值得注意的是：生成文字水印的時候，儘可能使用默認字體。這樣生成出來的圖片體積，相對會小一些。

原文地址：http://www.jianshu.com/p/6913fdeea59b

「製作器」小程序使用鏈接

https://minapp.com/miniapp/3501/

關注「知曉程序」公眾號

點擊展開全文

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！