??最近做這方面的東西，剛開始準備用一個開源項目：https://github.com/yueyoum/django-upload-avatar

? ? ?后來發現這個開源組件的原設計者的定制化選項設計略顯復雜,發現了它的主要設計技術組件，于是準備自己動手寫一個。

? ? ? 首先那個圖片切割選擇器的實現有一個很成熟的jQuery?插件叫：imgAreaSelect，官方地址：http://odyniec.NET/projects/imgareaselect/ ，github項目地址：https://github.com/odyniec/imgareaselect ，還有人做了文檔漢化：http://www.jb51.net/article/28485.htm

? ? ? 切割預覽是通過包含img的div的overflow：hidden來完成模擬切割，大小壓縮通過圖片的長寬調整來實現。

? ? ? 大概流程應該是首先選定圖片后即上傳圖片,上傳以后的圖片供候選的圖片切割選擇器和圖片預覽img元素使用。切割和縮放選定之后，上傳切割坐標數據然后在后端對之前上傳的預覽圖做切割縮放處理.

? ? ? 這個方案對比Flash實現方案：Flash能直接攝像頭照相,Flash的切割壓縮在客戶端本地。對比HTML5方案，html5應該也能對圖片在客戶端本地做處理。不過Flash單獨開發太麻煩，現在Flash逐漸完成轉向復雜多媒體解決方案了，Html5存在瀏覽器要求問題。

?

轉載于:https://www.cnblogs.com/dhcn/p/7106499.html

總結

以上是生活随笔為你收集整理的JavaScript头像上传器的实现的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。