如何使用H5生成微信頭像？

陳堅榮-百周CEO2016-04-24 16:25:13

頭像的獲取，可以透過weixin的oath2介面；

它可以返回你在微信上的頭像；

獲取後，透過程式碼把它鑲嵌在你製作好的背景中，就變成你截圖的效果啦。

文件參見

https：//

mp。weixin。qq。com/wiki？

t=resource/res_main&id=mp1421140842&token=&lang=zh_CN

匿名使用者2020-10-12 14:35:11

這類H5挺簡單的，算是最基礎的H5形式了，你可以用意派Epub360來製作。

我看題中的案例是直接透過截圖來獲得頭像的，那麼，只要透過給某個元素新增觸發行為——微信拍照／上傳圖片就行了，使用者上傳圖片到H5中後，直接用手機截個圖就OK了。

建議在動手製作之前，先全面瞭解一下意派Epub360這款專業h5工具。關於微信頭像的做法還有很多創意方式，意派Epub360的教程庫中有詳細的圖文製作教程，想學習的話可以先看下教程。

風箏2021-04-20 17:17:29

每逢大型慶典，特定節日或者企業週年紀念，比如國慶節、聖誕節，微信換頭像的需求總是很多，今天我們來教學一下如何製作微信換頭像h5頁面。

實現這類合成圖片型別的H5場景並不難，核心是截圖元件，原理是H5頁面可以放多層，你可以一層放微信頭像，上面一層放一些用於裝飾的小元素蓋在微信頭像上方，然後這個區域截圖下來，截圖後儲存在一個可以長按儲存的圖片上就可以了。

原理搞清楚了，下步就是製作了，可以開發實現，也可以使用H5工具實現。

但模板化的工具就做不到，例如筆者嘗試了易企秀、兔展、maka……幾乎全線陣亡，均不支援都實現合成圖片這個功能效果，所以這裡還是以專業工具做介紹。

第一個介紹的是上手操作難度和專業度綜合較強的Epub360：

1。首先你需要準備一箇中間鏤空的遮罩圖片，在上方工具欄新增微信頭像元件，設定好尺寸和圓角樣式，上方放中間鏤空的遮罩圖片即可。

2。我們提前新增一張空白圖片用來盛放截圖後的合成圖，並設定初始隱藏

3。新增截圖元件，勾選微信頭像和幻燈元件，設定截圖區域正好覆蓋微信頭像區域即可

4。在儲存按鈕上設定點選時，執行截圖觸發行為，勾選提前新增的空白圖片用來盛放截圖後的合成圖，截圖成功後顯示這張空白圖片

5。做好了，我們點選左上角的預覽，看下效果吧，如果是微信掃碼需要設定一下微信授權，就可以顯示微信頭像了

效果如下：

在H5工具木疙瘩的編輯器裡，需要新增微信頭像元件，在按鈕上設定點選時舞臺截圖屬性，並把截圖引數傳遞給一張圖片。

會好IUu2021-06-29 16:33:43

找一個H5製作工具，然後你會發現有很多頭像生成的模板，選擇你自己喜歡的，點進去製作就好啦。

我特別喜歡製作這方面的東西，自己也收集了很多模板，下面分享給你們，看看有沒有喜歡的，直接拿走把。

圖片來自網路，如有侵權請聯絡我刪除

圖片來自網路，如有侵權請聯絡我刪除

圖片來自網路，如有侵權請聯絡我刪除

知乎使用者2021-08-28 14:38:24

或許，你知道H5製作裡面有個生成“節日頭像”功能嗎？

當然，忽略“節日”這個詞

反正它的功能可以生成你這種“頭像邊框”。

人人秀 | 免費h5頁面製作工具，3分鐘製作微信html5微場景平臺 | 人人秀H5頁面，1000萬用戶的選擇（原名we+）

製作完成之後，人們點選進去，微信會自動獲取頭像！

生成你所設定的主題頭像。

過程很簡單，最直接的方式，就是在H5平臺上，找找有沒有自己想要的模板。

再者，如果想製作一個完全屬於自己的樣式，也很簡單。

自己建立活動，進入編輯頁面，找到“節日頭像”外掛，

上傳自己想要的圖文資訊，就可以設定出這樣的頭像了。