wex5 教程 之 圖文講解 頭像裁剪與上傳
視訊教程地址:
http://v.youku.com/v_show/id_XMTgyMDE5NjEyOA==.html一 效果演示
1.點選頭像,彈出圖片裁剪框
2,選擇圖片,裁剪,上傳
3.上傳成功後,頭像圖示更改
二 案例解讀
案例目錄
wex5為我們提供了一個picut圖片裁剪案例,如下:
元件部局
加入file標籤用來開啟檔案管理器進行圖片選擇,div標籤進行圖片預覽,image標籤為裁剪圖片
後端服務
後端接收請求引數後,對路徑進行了拼接,建立檔案流,並建立檔案,成功後將成功資訊傳給前臺。
程式碼解讀
引入cropper.js圖片裁剪js.
cropper.js為我們提供了一組引數,案例中有註釋,
$('.cropper-example-1 > img').cropper(options);找到img對像並初始化引數執行cropper.
用button的click事件,觸發file標籤的click事件,開啟檔案管理器,選擇圖片
選中圖片後,觸發file標籤的fileChange事件,在此事件中,對檔案型別image判斷。event.target.filts[0]表示從檔案管理器選擇的多個圖片陣列,只選其第一個對像,進行URL.createObjectURL(file)轉換。
var data = result.toDataURL();得到剪下後的二維流資料,通過baas.send方法非同步上傳,成功後返回資訊。
將成功上傳後的圖片資訊給了image,實現預覽。
三 實戰改裝與程式碼實現
1 資料庫設計
建立頭像欄位headImgUrl
2 後端改裝
將後端上傳upload.java複製到當前工程,新增到便於修改,
修改檔案路徑為當前工程目錄
3. 前端改裝
點選頭像,用windowDialog開啟圖片裁剪框,並將使用者當前行資料傳入。
windowDialog資料進行對映。
裁剪框頁面data autoLoad為false,接收引數,並載入。
影象預覽,做成圓形,並放在標題頭部。
根據頭像圓形,改變取景框為1:1,即正方形。
用justep.UUID.createUUID()建立圖片名稱,並拼接imgUrl圖片路徑。
圖片上傳成功後,寫入資料庫imgUrl.
因為我用windowDialog開啟的圖片裁剪框,確定後將資料傳回主頁面
工程完成,圖示更換完成。