前幾天元旦, 用Python為自家公眾號做了一個”革面”的活動頁面,活動的效果非常好,分享一下實現過程

• 前端: BootStrap, Jquery, Jcrop
• 後端: Django, Pillow

第一步: 選擇頭像

初始頁面

• 這是一個簡單的前端頁面,為了追求效果,將裝飾紅色以外的部分,進行透明處理,這樣透過背景的紋理,會顯得自然,簡潔

選擇,頁面響應,出現下一步按鈕

• 簡單的響應處理, 使用者點選後, 邊框變色,下一步按鈕會延時浮現出來,引導使用者點選”下一步”

第二步:上傳頭像, 並實時裁剪

初始頁面

• 這裡圓形區為canvas實時預覽,裁剪區使用了Jcrop外掛(有些安卓機不太支援這個外掛),使用者點選”選擇頭像”後,會呼叫系統檔案,上傳圖片

上傳圖片, 並裁剪

• 上傳圖片後, 圖片會實時顯示, 使用者可以通過拖動8點框裁剪,裁剪效果會在上方實時顯示
• 使用者拖動8點框後,下方的”小匯出圖”會延遲1秒鐘顯示出來(引導使用者點選, 獲取圖片)

第三步: 生成圖片,長按儲存

生成圖片

• 將頁面所有元素隱藏,在後臺將上一步的預覽圖片傳送到後端,後端Django使用Pillow進行影像合成,將成品返回到前端頁面,使用者長按儲存後,儲存完成

這個是小程式的線上演示地址: http://www.3qv1oo.com/xmt/start_game/
Github開源地址: https://github.com/zhaoolee/NewAvatar