圖片上傳裁剪之小記

項目須要在圖片上傳到服務器以前提供用戶裁剪圖片，並且要求圓形的裁剪框，因而，咱們在裁剪上傳到服務器以前寫一個引用裁剪的方法，固然咱們須要插件cropper.js. 而後裁剪以後經過canvas吧圖片裁剪成圓形，這時候要求用戶上傳的圖片必須是正方形，因此咱們用canvas裁剪時取的半徑和圓心位置都是圖片裁剪以前的1/2。可是後面需求增長到容許用戶上傳寬高不一致的圖片，那麼問題就出現了，裁剪後的圖片位置不一。緣由是由於給canvas設置半徑圓心時是以原始圖片的寬高而定的，實際上應該以裁剪完成後的圖片寬高爲準，由於裁剪後的圖片都是正方形。