如何使用H5生成微信頭像?
頭像的獲取,可以透過weixin的oath2介面;
它可以返回你在微信上的頭像;
獲取後,透過程式碼把它鑲嵌在你製作好的背景中,就變成你截圖的效果啦。
文件參見
https://
mp。weixin。qq。com/wiki?
t=resource/res_main&id=mp1421140842&token=&lang=zh_CN
這類H5挺簡單的,算是最基礎的H5形式了,你可以用意派Epub360來製作。
我看題中的案例是直接透過截圖來獲得頭像的,那麼,只要透過給某個元素新增觸發行為——微信拍照/上傳圖片就行了,使用者上傳圖片到H5中後,直接用手機截個圖就OK了。
建議在動手製作之前,先全面瞭解一下意派Epub360這款專業h5工具。關於微信頭像的做法還有很多創意方式,意派Epub360的教程庫中有詳細的圖文製作教程,想學習的話可以先看下教程。
每逢大型慶典,特定節日或者企業週年紀念,比如國慶節、聖誕節,微信換頭像的需求總是很多,今天我們來教學一下如何製作微信換頭像h5頁面。
實現這類合成圖片型別的H5場景並不難,核心是截圖元件,原理是H5頁面可以放多層,你可以一層放微信頭像,上面一層放一些用於裝飾的小元素蓋在微信頭像上方,然後這個區域截圖下來,截圖後儲存在一個可以長按儲存的圖片上就可以了。
原理搞清楚了,下步就是製作了,可以開發實現,也可以使用H5工具實現。
但模板化的工具就做不到,例如筆者嘗試了易企秀、兔展、maka……幾乎全線陣亡,均不支援都實現合成圖片這個功能效果,所以這裡還是以專業工具做介紹。
第一個介紹的是上手操作難度和專業度綜合較強的Epub360:
1。首先你需要準備一箇中間鏤空的遮罩圖片,在上方工具欄新增微信頭像元件,設定好尺寸和圓角樣式,上方放中間鏤空的遮罩圖片即可。
2。我們提前新增一張空白圖片用來盛放截圖後的合成圖,並設定初始隱藏
3。新增截圖元件,勾選微信頭像和幻燈元件,設定截圖區域正好覆蓋微信頭像區域即可
4。在儲存按鈕上設定點選時,執行截圖觸發行為,勾選提前新增的空白圖片用來盛放截圖後的合成圖,截圖成功後顯示這張空白圖片
5。做好了,我們點選左上角的預覽,看下效果吧,如果是微信掃碼需要設定一下微信授權,就可以顯示微信頭像了
效果如下:
在H5工具木疙瘩的編輯器裡,需要新增微信頭像元件,在按鈕上設定點選時舞臺截圖屬性,並把截圖引數傳遞給一張圖片。
找一個H5製作工具,然後你會發現有很多頭像生成的模板,選擇你自己喜歡的,點進去製作就好啦。
我特別喜歡製作這方面的東西,自己也收集了很多模板,下面分享給你們,看看有沒有喜歡的,直接拿走把。
圖片來自網路,如有侵權請聯絡我刪除
圖片來自網路,如有侵權請聯絡我刪除
圖片來自網路,如有侵權請聯絡我刪除
或許,你知道H5製作裡面有個生成“節日頭像”功能嗎?
當然,忽略“節日”這個詞
反正它的功能可以生成你這種“頭像邊框”。
人人秀 | 免費h5頁面製作工具,3分鐘製作微信html5微場景平臺 | 人人秀H5頁面,1000萬用戶的選擇(原名we+)
製作完成之後,人們點選進去,微信會自動獲取頭像!
生成你所設定的主題頭像。
過程很簡單,最直接的方式,就是在H5平臺上,找找有沒有自己想要的模板。
再者,如果想製作一個完全屬於自己的樣式,也很簡單。
自己建立活動,進入編輯頁面,找到“節日頭像”外掛,
上傳自己想要的圖文資訊,就可以設定出這樣的頭像了。