需求背景：

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

效果图：

安装使用

1、安装

`npm install vue-cropper // npm 安装`
`yarn add vue-cropper // yarn` `安装`

2、引用

// 全局引用  main.js
import 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: 'https://pic1.zhimg.com/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

vue+element实现图片上传及裁剪功能（vue-cropper）相关推荐

vue element 单张图片上传，删除，预览
功能点: 点击'查看图片'按钮,弹窗中会展示图片,第一次看到的图片是从父组件传过来的图片,点击删除按钮,调取删除接口删除图片,在重新上传图片,data中放入列表那一项的数据,上传成功,图片需要回显,此 ...
vue+elementUI 实现图片上传预览功能
准备工作:你需要一个后台接口,你传文件给他,他返回一个图片在线链接.ok,开干! 用到的是elmentUI里的el-upload,先去看官网例子.我用到的是图片列表先把html的框架copy过来,然 ...
1小时搞定cropper.js制作头像/图片上传、裁剪、并发送至后端
1小时搞定cropper.js制作头像/图片上传.裁剪.并发送至后端先给大家看一下最终效果. 大多数功能都是由Cropper.js封装好的,调整并制作了: 上传图片对图片的裁剪以及调整(旋转.缩放 ...
JAVA实现一个图片上传预览功能
这个小项目主要使用java实现了一个简单的图片上传预览功能,废话不多说,先上实现成果 ^ _ ^
php微信小程序多图上传,tp5实现微信小程序多图片上传到服务器功能
最近在做一个教育类的小商城的微信小程序,用到了上传多个图片文件到服务器端,这里做一个讲解,希望对大家有所帮助. 1,小程序端: 在wxml文件中: 删除点击上传作业在js文件中: Page({ / ...
java多图片上传插件,Bootstrap中的fileinput 多图片上传及编辑功能
Bootstrap中的fileinput 多图片上传及编辑功能 2019-01-01 编程之家收集整理的这篇文章主要介绍了Bootstrap中的fileinput 多图片上传及编辑功能,编程之家小编觉 ...
js实现图片上传预览功能
js实现图片上传预览功能很多业务场景下,我们需要在用户上传图片前,先预览待上传的图片 <body><input type="file"><img s ...
Vue+SpringBoot+OSS+element实现图片上传服务器+图片展示墙
1.技术选型: (1)Vue(前端) (2)Element(上传图片组件) (3)SpringBoot(后端) (4)Mybatis(数据库操作) (3)OSS(阿里云存储服务器) 2.实现效果概述: ...
用Vue来实现图片上传多种方式
项目中需要上传图片可谓是经常遇到的需求,本文将介绍 3 种不同的图片上传方式,在这总结分享一下,有什么建议或者意见,请大家踊跃提出来. 没有业务场景的功能都是耍流氓,那么我们先来模拟一个需要实现的业务 ...

vue+element实现图片上传及裁剪功能（vue-cropper）

需求背景：

效果图：

安装使用

1、安装

`npm install vue-cropper // npm 安装`
`yarn add vue-cropper // yarn` `安装`

2、引用

3、使用

vue+element实现图片上传及裁剪功能（vue-cropper）相关推荐

最新文章

热门文章

vue+element实现图片上传及裁剪功能（vue-cropper）

需求背景：

效果图：

安装使用

1、安装

npm install vue-cropper // npm 安装 yarn add vue-cropper // yarn 安装

2、引用

3、使用

vue+element实现图片上传及裁剪功能（vue-cropper）相关推荐

最新文章

热门文章

`npm install vue-cropper // npm 安装`
`yarn add vue-cropper // yarn` `安装`