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 还有众多属性和方法，用起来都很方便，有兴趣的同学可以实现一下实时预览。

文档地址：https://github.com/xyxiao001/...

看完不要忘了点个赞呦，听说点赞的来年升职加薪，爱情事业双丰收