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 還有眾多屬性和方法,用起來都很方便,有興趣的同學可以實現一下實時預覽。
看完不要忘了點個贊呦,聽説點讚的來年升職加薪,愛情事業雙豐收😃
「其他文章」
- Vite 性能篇:掌握這些優化策略,一起縱享絲滑!
- Vite 配置篇:日常開發掌握這些配置就夠了!
- Vite 入門篇:學會它,一起提升開發幸福感!
- 還有人沒嘗過 Pinia 嗎,請收下這份食用指南!
- 10個常見的使用場景,助你從 Vue2 絲滑過渡到 Vue3 !
- 前端手寫功能第二彈,提升內力,等待下一次爆發!
- 效率提升之 —— 如何優雅的帶走上份工作的VSCode配置
- Vue組件遞歸——組件化開發的必備技能!
- 10個常用的JS工具庫,80%的項目都在用!
- 如何嚴格判斷文件上傳類型?再不會你就out啦!
- Element-UI 奇淫技巧第二彈!提升開發效率,延長摸魚時間~
- 原來虛擬列表如此簡單!萬萬沒想到
- 10個常見的前端手寫功能,你全都會嗎?
- 一款強大到沒朋友的圖片編輯插件,愛了愛了!
- 如何實現拖拽上傳、上傳進度條,以及取消上傳?
- Vue 1分鐘實現右鍵菜單,懶人的福音!
- Vue 如何快速實現頭像裁剪?方法比你想象的簡單
- 前端持久化之瀏覽器存儲技術(localStorage、sessionStorage 、session、cookies)