Vue|Vue 如何快速实现头像裁剪（方法比你想象的简单） Vue如何快速实现头像裁剪？方

高效实现需求的方法，就是避免重复造轮子。图片裁剪的插件也不少，这里我选择 vue-cropper，原因是功能强大、简单易上手。话不多说，上效果图：
效果图

文章图片

文章图片

安装

npm install vue-cropper

使用

import { VueCropper } from 'vue-cropper'

代码实现
【Vue|Vue 如何快速实现头像裁剪（方法比你想象的简单）】以 element-ui + vue-cropper 为例实现头像裁剪
src/App.vue

src/components/avatarCropper.vue

.dialog-footer { display: flex; justify-content: space-between; align-items: center; font-size: 14px; .reupload { color: #409eff; cursor: pointer; } } .avatar-container { display: flex; justify-content: center; align-items: center; width: 560px; height: 400px; background-color: #f0f2f5; margin-right: 10px; border-radius: 4px; .upload { text-align: center; margin-bottom: 24px; } .avatar-crop { width: 560px; height: 400px; position: relative; .crop-box { width: 100%; height: 100%; border-radius: 4px; overflow: hidden; } } }

总结
裁剪完成之后可以获取到 base64 和 blob 数据，然后上传至后端。vue-cropper 还有众多属性和方法，用起来都很方便，有兴趣的同学可以实现一下实时预览。
文档地址：https://github.com/xyxiao001/...