Python綜合Web案例_線上為頭像新增裝飾

木子昭發表於2018-01-03
原文網址 : https://flycode.co/archives/168287
PythonWeb

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


相關文章