頭像被剪裁怎麼辦

玩知乎的小夥伴應該都知道，知乎的頭像裁剪元件十分的酷炫，看看下面知乎的效果圖：

於是乎呢我就想用react模仿寫一下這個小元件。

知乎的頭像裁剪是用canvas處理的，我就用普通的div+css實現就好了，簡單佈局一下，仔細觀察可以看見圖片是有一層白色的陰影的，中間的部分才是清晰的，這裡的實現可以用兩張圖片，主要的佈局是，先放上一張圖片，然後放上陰影層，然後再放上圖片，現在這個圖片的寬高，只要拖拽的時候同時移動兩張圖片的位置就可以實現看起來是一張圖片的效果了。

佈局寫好了，就可以先實現拖拽了，拖拽十分簡單，我這裡直接使用我上一篇文章所提及的我封裝的拖拽小元件就可以了，拖拽的是其中一張圖片，我封裝的元件會返回一個包含拖拽位置的物件，外層的圖片就可以直接同時設定位置了

效果圖是這樣：

拖拽完成了就可以寫放大縮小的邏輯了，放大縮寫就有antd的Slider元件，控制最多可以放大一倍，用圖片的寬高乘以這個比例就可以實現放大縮小了

程式碼中的用當前的圖片寬度除以上一次放大縮小的比例就可以得到原始圖片的尺寸了，然後再乘以當前的比較就可以實現當前這個比例的寬高了，至於為什麼要加上後面那一串運算，是為了讓圖片放大縮小的中心點是在圖片中間，不加上看起來是在圖片的放大縮小中心點在左上角。

放大縮小後的拖拽其實也是一樣的，整個效果的實現其實比較複雜是數學演算法上面的，邊緣處理，限制處理比較麻煩，所以整個效果看起來可能還不像知乎那個那麼平滑，有興趣的小夥伴可以複製demo連結檢視：

https：//qq2279881628。github。io/react-image-editer/demo/public/index。html

例子的原始碼地址：

https：//github。com/qq2279881628/react-image-editer

日積月累，一起成長！喜歡記得點贊分享評論哦！