視訊教程地址：

一 效果演示

      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開啟的圖片裁剪框，確定後將資料傳回主頁面

   工程完成，圖示更換完成。