需求背景：

上传图片或者头像时，能够将图片进行裁剪（等比例缩放裁剪或非等比例裁剪）

效果图：

安装使用

1、安装

npm install vue-cropper // npm 安装

yarn add vue-cropper // yarn安装

2、引用

// 全局引用 main.jsimport VueCropper from 'vue-cropper'Vue.use(VueCropper)// 局部引用import VueCropper from 'vue-cropper'components: { VueCropper },

3、使用

（我的页面需求是很多地方都需要使用这个裁剪弹窗所以我就将这一整个上传裁剪的模块单独封装起来了，但是把封装起来的代码贴上来就太多了 因为涉及到传值的地方很多，所以看起来会费力点，这里就单独把上传的组件放上来 大家需要封装的话 自己可以把这个模块进行改造）

1、上传按钮：

<!-- element 上传图片按钮 --><el-upload class="upload-demo"action=""drag:auto-upload="false":show-file-list="false":on-change='handleChangeUpload'><i class="el-icon-upload"></i><div class="el-upload__text">点击上传</div></el-upload>

2. 设置一个弹出层，放剪裁图片的cropper

<!-- vueCropper 剪裁图片实现--><el-dialog title="图片剪裁" :visible.sync="dialogVisible" class="crop-dialog" append-to-body><div class="cropper-content"><div class="cropper" style="text-align:center"><vueCropperref="cropper":img="option.img":outputSize="option.size":outputType="option.outputType":info="true":full="option.full":canMove="option.canMove":canMoveBox="option.canMoveBox":original="option.original":autoCrop="option.autoCrop":fixed="option.fixed":fixedNumber="option.fixedNumber":centerBox="option.centerBox":infoTrue="option.infoTrue":fixedBox="option.fixedBox":autoCropWidth="option.autoCropWidth":autoCropHeight="option.autoCropHeight"@cropMoving="cropMoving"/></div></div><div class="action-box"><el-upload class="upload-demo"action="":auto-upload="false":show-file-list="false":on-change='handleChangeUpload'><el-button type="primary" plain>更换图片</el-button></el-upload><!-- 这里的按钮可以根据自己的需求进行增删--><el-button type="primary" plain @click="clearImgHandle">清除图片</el-button><el-button type="primary" plain @click="rotateLeftHandle">左旋转</el-button><el-button type="primary" plain @click="rotateRightHandle">右旋转</el-button><el-button type="primary" plain @click="changeScaleHandle(1)">放大</el-button><el-button type="primary" plain @click="changeScaleHandle(-1)">缩小</el-button><el-button type="primary" plain @click="downloadHandle('blob')">下载</el-button></div><div slot="footer" class="dialog-footer"><el-button @click="dialogVisible = false">取 消</el-button><el-button type="primary" @click="finish" :loading="loading">确认</el-button></div></el-dialog>

3、裁剪框样式

.cropper-content {.cropper {width: auto;height: 350px;}}

4、方法

option是剪裁插件的属性配置，具体更多含义查看官网介绍

<script>export default {name: "Cropper",data() {return {isPreview: false,dialogVisible: false,previewImg: '', // 预览图片地址// 裁剪组件的基础配置optionoption: {img: '/80/v2-366c0aeae2b4050fa2fcbfc09c74aad4_720w.jpg', // 裁剪图片的地址info: true, // 裁剪框的大小信息outputSize: 1, // 裁剪生成图片的质量outputType: 'png', // 裁剪生成图片的格式canScale: true, // 图片是否允许滚轮缩放autoCrop: true, // 是否默认生成截图框canMoveBox: true, // 截图框能否拖动autoCropWidth: 200, // 默认生成截图框宽度autoCropHeight: 200, // 默认生成截图框高度fixedBox: false, // 固定截图框大小 不允许改变fixed: true, // 是否开启截图框宽高固定比例fixedNumber: [1, 1], // 截图框的宽高比例full: false, // 是否输出原图比例的截图original: false, // 上传图片按照原始比例渲染centerBox: false, // 截图框是否被限制在图片里面infoTrue: true // true 为展示真实输出图片宽高 false 展示看到的截图框宽高},// 防止重复提交loading: false}},methods: {// 上传按钮 限制图片大小和类型handleChangeUpload(file, fileList) {const isJPG = file.raw.type === 'image/jpeg' || file.raw.type === 'image/png';const isLt2M = file.size / 1024 / 1024 < 2;if (!isJPG) {this.$message.error('上传头像图片只能是 JPG/PNG 格式!');return false}if (!isLt2M) {this.$message.error('上传头像图片大小不能超过 2MB!');return false}// 上传成功后将图片地址赋值给裁剪框显示图片this.$nextTick(async () => {// base64方式// this.option.img = await fileByBase64(file.raw)this.option.img = URL.createObjectURL(file.raw)this.loading = falsethis.dialogVisible = true})},// 放大/缩小changeScaleHandle(num) {num = num || 1;this.$refs.cropper.changeScale(num);},// 左旋转rotateLeftHandle() {this.$refs.cropper.rotateLeft();},// 右旋转rotateRightHandle() {this.$refs.cropper.rotateRight();},// 下载downloadHandle(type) {let aLink = document.createElement('a')aLink.download = 'author-img'if (type === 'blob') {this.$refs.cropper.getCropBlob((data) => {let downImg = window.URL.createObjectURL(data)aLink.href = window.URL.createObjectURL(data)aLink.click()})} else {this.$refs.cropper.getCropData((data) => {let downImg = data;aLink.href = data;aLink.click()})}},// 清理图片clearImgHandle() {this.option.img = ''},// 截图框移动回调函数cropMoving(data) {// 截图框的左上角 x，y和右下角坐标x，y// let cropAxis = [data.axis.x1, data.axis.y1, data.axis.x2, data.axis.y2]// console.log(cropAxis)},finish() {// 获取截图的 blob 数据this.$refs.cropper.getCropBlob((blob) => {let file = new FormData()var abc = new File([blob], this.fileInfo.name, {type: 'image/jpeg', lastModified: Date.now()});file.append('file', abc)// 这里根据自己需要的格式上传服务器this.$axios.post(this.$server + '/upload/uploadImg', file, {headers: {'Content-Type': 'multipart/form-data',Authorization: this.token,submitToken: this.uid }}).then(res => {const {code, data, message} = res.dataif (code === '0') {this.dialogVisible = false} else {this.$message.error(message)}})})// 获取截图的 base64 数据// this.$refs.cropper.getCropData(data => {//console.log(data)// })}}}</script>

5、总结

裁剪完成之后可以获取到 base64 和 blob 数据可根据自己需要在上传至服务器

参考文章：vue+element实现图片上传及裁剪功能（vue-cropper）_努力搬砖的阿一的博客-CSDN博客_element 裁剪框

附vue-cropper官网地址链接：vue-cropper