Python綜合Web案例_線上為頭像添加裝飾

前幾天元旦, 用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