Vue 如何快速實現頭像裁剪？方法比你想象的簡單

高效實現需求的方法，就是避免重複造輪子。圖片裁剪的插件也不少，這裏我選擇 vue-cropper，原因是功能強大、簡單易上手。話不多説，上效果圖：

效果圖

安裝

npm install vue-cropper

使用

import { VueCropper } from 'vue-cropper'

代碼實現

以 element-ui + vue-cropper 為例實現頭像裁剪

src/App.vue ```

``` src/components/avatarCropper.vue

```

```

總結

裁剪完成之後可以獲取到 base64 和 blob 數據，然後上傳至後端。vue-cropper 還有眾多屬性和方法，用起來都很方便，有興趣的同學可以實現一下實時預覽。

看完不要忘了點個贊呦，聽説點讚的來年升職加薪，愛情事業雙豐收😃