基于vue的图片裁剪vue-cropper

最近小编好久没有写博客了，今天发现突然涨了好几个粉，特别的开心，为了回馈大家，我今天准备了一点点小小的心意，最近工作实在太忙，难得抽空更博了，不过最近小编会快马加鞭努力更博的。

新的需求

最近小编遇到一个图片裁剪的需求，对于一个前端小白的我来说，搞这些花里胡哨的东西，走了很多弯路，各种百度，改了又改，实则不易啊。废话不多说上大图：

vue-cropper官网

链接：https://github.com/xyxiao001/vue-cropper

安装：npm install vue-cropper 或者 yarn add vue-cropper

代码拷贝

废话不多说，代码也不多敲，相信大家和我一样，能粘贴绝不手敲，哈哈。

组件封装CropperImage.vue

<template><div class="cropper-content"><div class="cropper-box"><div class="cropper"><vue-cropperref="cropper":img="option.img":outputSize="option.outputSize":outputType="option.outputType":info="option.info":canScale="option.canScale":autoCrop="option.autoCrop":autoCropWidth="option.autoCropWidth":autoCropHeight="option.autoCropHeight":fixed="option.fixed":fixedNumber="option.fixedNumber":full="option.full":fixedBox="option.fixedBox":canMove="option.canMove":canMoveBox="option.canMoveBox":original="option.original":centerBox="option.centerBox":height="option.height":infoTrue="option.infoTrue":maxImgSize="option.maxImgSize":enlarge="option.enlarge":mode="option.mode"@realTime="realTime"@imgLoad="imgLoad"></vue-cropper></div><!--底部操作工具按钮--><div class="footer-btn"><div class="scope-btn"><label class="btn" for="uploads">选择封面</label><input type="file" id="uploads" style="position:absolute; clip:rect(0 0 0 0);" accept="image/png, image/jpeg, image/gif, image/jpg" @change="selectImg($event)"><el-button size="mini" type="danger" plain icon="el-icon-zoom-in" @click="changeScale(1)">放大</el-button><el-button size="mini" type="danger" plain icon="el-icon-zoom-out" @click="changeScale(-1)">缩小</el-button><el-button size="mini" type="danger" plain @click="rotateLeft">↺ 左旋转</el-button><el-button size="mini" type="danger" plain @click="rotateRight">↻ 右旋转</el-button></div><div class="upload-btn"><el-button size="mini" type="success" @click="uploadImg('blob')">上传封面 <i class="el-icon-upload"></i></el-button></div></div></div><!--预览效果图--><div class="show-preview"><div :style="previews.div" class="preview"><img :src="previews.url" :style="previews.img"></div></div></div>
</template><script>
import { VueCropper } from 'vue-cropper'
export default {name: "CropperImage",components: {VueCropper},props:['Name'],data() {return {name:this.Name,previews: {},option:{img: '',             //裁剪图片的地址outputSize: 1,       //裁剪生成图片的质量(可选0.1 - 1)outputType: 'jpeg',  //裁剪生成图片的格式（jpeg || png || webp）info: true,          //图片大小信息canScale: true,      //图片是否允许滚轮缩放autoCrop: true,      //是否默认生成截图框autoCropWidth: 230,  //默认生成截图框宽度autoCropHeight: 150, //默认生成截图框高度fixed: true,         //是否开启截图框宽高固定比例fixedNumber: [1.53, 1], //截图框的宽高比例full: false,         //false按原比例裁切图片，不失真fixedBox: true,      //固定截图框大小，不允许改变canMove: false,      //上传图片是否可以移动canMoveBox: true,    //截图框能否拖动original: false,     //上传图片按照原始比例渲染centerBox: false,    //截图框是否被限制在图片里面height: true,        //是否按照设备的dpr 输出等比例图片infoTrue: false,     //true为展示真实输出图片宽高，false展示看到的截图框宽高maxImgSize: 3000,    //限制图片最大宽度和高度enlarge: 1,          //图片根据截图框输出比例倍数mode: '230px 150px'  //图片默认渲染方式}};},methods: {//初始化函数imgLoad (msg) {console.log("工具初始化函数====="+msg)},//图片缩放changeScale (num) {num = num || 1this.$refs.cropper.changeScale(num)},//向左旋转rotateLeft () {this.$refs.cropper.rotateLeft()},//向右旋转rotateRight () {this.$refs.cropper.rotateRight()},//实时预览函数realTime (data) {this.previews = data},//选择图片selectImg (e) {let file = e.target.files[0]if (!/\.(jpg|jpeg|png|JPG|PNG)$/.test(e.target.value)) {this.$message({message: '图片类型要求：jpeg、jpg、png',type: "error"});return false}//转化为bloblet reader = new FileReader()reader.onload = (e) => {let dataif (typeof e.target.result === 'object') {data = window.URL.createObjectURL(new Blob([e.target.result]))} else {data = e.target.result}this.option.img = data}//转化为base64reader.readAsDataURL(file)},//上传图片uploadImg (type) {let _this = this;if (type === 'blob') {//获取截图的blob数据this.$refs.cropper.getCropBlob(async (data) => {let formData = new FormData();formData.append('file',data,"DX.jpg")//调用axios上传let {data: res} = await _this.$http.post('/api/file/imgUpload', formData)if(res.code === 200){_this.$message({message: res.msg,type: "success"});let data = res.data.replace('[','').replace(']','').split(',');let imgInfo = {name : _this.Name,url : data[0]};_this.$emit('uploadImgSuccess',imgInfo);}else {_this.$message({message: '文件服务异常，请联系管理员！',type: "error"});}})}},},
}
</script><style scoped lang="scss">
.cropper-content{display: flex;display: -webkit-flex;justify-content: flex-end;.cropper-box{flex: 1;width: 100%;.cropper{width: auto;height: 300px;}}.show-preview{flex: 1;-webkit-flex: 1;display: flex;display: -webkit-flex;justify-content: center;.preview{overflow: hidden;border:1px solid #67c23a;background: #cccccc;}}
}
.footer-btn{margin-top: 30px;display: flex;display: -webkit-flex;justify-content: flex-end;.scope-btn{display: flex;display: -webkit-flex;justify-content: space-between;padding-right: 10px;}.upload-btn{flex: 1;-webkit-flex: 1;display: flex;display: -webkit-flex;justify-content: center;}.btn {outline: none;display: inline-block;line-height: 1;white-space: nowrap;cursor: pointer;-webkit-appearance: none;text-align: center;-webkit-box-sizing: border-box;box-sizing: border-box;outline: 0;-webkit-transition: .1s;transition: .1s;font-weight: 500;padding: 8px 15px;font-size: 12px;border-radius: 3px;color: #fff;background-color: #409EFF;border-color: #409EFF;margin-right: 10px;}
}
</style>

注意：裁剪组件的基础配置option，小编这里配置了官方所给的所有基础配置，大家可以按需配置。

新建Tailoring.vue 调用封装好的组件:

这里我们先简单说一下思路，通过按钮触发事件打开我们的剪裁窗口，选择图片，点击上传之后，将地址回调回来，拿到地址就可以处理我们的业务了，比如随着表单一起将回调地址存入数据库等等。

Tailoring.vue：

<template><div class="cropper-app"><el-form :model="formValidate" :rules="ruleValidate" ref="formValidate" label-width="100px" class="demo-ruleForm"><el-form-item label="封面上传" prop="mainImage"><div class="list-img-box"><div v-if="formValidate.mainImage !== ''"><img :src="formValidate.mainImage" style='width:300px;height:150px' alt="自定义封面"></div><div v-else class="upload-btn" style="height: 120px;" @click="uploadPicture('flagImg')"><i class="el-icon-plus" style="font-size: 30px;"></i><span>封面设置</span></div></div><input type="hidden" v-model="formValidate.mainImage" placeholder="请添加封面"></el-form-item></el-form><!-- 剪裁组件弹窗 --><el-dialogtitle="裁切封面":visible.sync="cropperModel"width="950px"center><cropper-image:Name="cropperName"@uploadImgSuccess = "handleUploadSuccess"ref="child"></cropper-image></el-dialog><!--查看大封面--><el-dialogtitle="查看大封面":visible.sync="imgVisible"center><img :src="imgName" v-if="imgVisible" style="width: 100%" alt="查看"></el-dialog></div>
</template><script>
import CropperImage from "@/views/resmanage/CropperImage";
export default {name: "Tailoring",components: {CropperImage},data () {return {formValidate: {mainImage: '',},ruleValidate: {mainImage: [{required: true, message: '请上传封面', trigger: 'blur'}],},//裁切图片参数cropperModel:false,cropperName:'',imgName: '',imgVisible: false}},methods: {//封面设置uploadPicture(name){this.cropperName = name;this.cropperModel = true;},//图片上传成功后handleUploadSuccess (data){console.log(data)switch(data.name){case 'flagImg':this.formValidate.mainImage = 'http://ydfblog.cn/dfs/'+data.url;console.log('最终输出'+data.name)break;}this.cropperModel = false;}}
}
</script>
<style scoped>.upload-list-cover{position: absolute;top: 0;bottom: 0;left: 0;right: 0;display: flex;flex-wrap: wrap;justify-content: space-between;padding: 0 40px;align-items: center;background: rgba(0,0,0,.6);opacity: 0;transition: opacity 1s;}.cover_icon {font-size: 30px;}.upload-btn{display: -webkit-box;display: -ms-flexbox;display: flex;-ms-flex-wrap: wrap;flex-wrap: wrap;-webkit-box-pack: center;-ms-flex-pack: center;justify-content: center;-webkit-box-align: center;-ms-flex-align: center;align-items: center;border: 1px solid #cccccc;border-radius: 5px;overflow: hidden;box-shadow: 0 0 1px #cccccc;}.upload-btn:hover {border: 1px solid #69b7ed;}.upload-btn i{margin: 5px;}
</style>

最后

如果你觉得DT_小白文章写的还不错，请微信搜索并关注「 Java云社」微信公众号，和DT_小白一起学习Java、分布式、微服务、大数据技术，并且「 Java云社」收集了大量的大厂面试题目集，等你来挖掘，为了提升自己的能力，实现技术能力的飞跃，每天定时更新超硬核技术干货，我在「 Java云社」等您的加入，让我们共同学习吧！

史上最全基于vue的图片裁剪vue-cropper使用相关推荐

input file图片上传（使用OSS Javscrtipt 上传到服务器）以及图片裁剪（cropper.js）
一.图片上传 (1)使用 <input type="file" accept="image/*" name="file" @chang ...
史上最全 | 基于深度学习的3D分割综述（RGB-D/点云/体素/多目）
点击下方卡片,关注"自动驾驶之心"公众号 ADAS巨卷干货,即可获取点击进入→自动驾驶之心[分割]术交流群后台回复[分割综述]获取语义分割.实例分割.全景分割.弱监督分割等超全 ...
2021-最新Web前端经典面试试题及答案-史上最全前端面试题(含答案)---Vue篇
★★★ 如何使用原生 Node.js 操做 cookie? ★★ 什么是 Node.js?我们在哪里使用它? ★★ 为什么要使用 Node.js? ★★★ Node.js 有哪些特点? ★★★ set ...
Netty面试题（史上最全）
文章很长5万字,而且不断更新,建议收藏起来慢慢读!疯狂创客圈总目录语雀版 | 总目录码云版| 总目录博客园版为您奉上珍贵的学习资源 : 免费赠送经典图书:<Java高并发核心编程(卷1 ...
Vue相关开源项目库汇总(史上最全)
目录 UI组件开发框架实用库服务端辅助工具应用实例 Demo示例 UI组件 element ★13489 - 饿了么出品的Vue2的web UI工具套件 Vux ★8133 - 基于Vue和 ...
史上最全的vue插件库
无意间发现的一个整合内容,超级强大,赶紧记录下来!原文链接内容 UI组件开发框架实用库服务端辅助工具应用实例 Demo示例 UI组件 element ★13489 - 饿了么出品的Vue2 ...
手把手教你配置linux下C++开发工具——vim+ycm(YouCompleteMe)，支持基于语义的自动补全和第三方库补全（史上最简单、史上最透彻、史上最全的终极解决方案）
截止到目前,vim稳定版本已经到了8.2+,ycm(YouCompleteMe的简称)最新版本与几年前的安装配置截然不同了.之前网上很多教程也教不得法,生搬硬套,没有讲透彻.所以,才下定决心写一篇自认 ...
10_史上最全的Markdown使用教程（没有之一）（20190115）
我用markdown写博客已经有半年之久了吧,但是还是会出现有些你想用的功能很难找,或者你尝试使用它不好使,为了帮助那些和我一样热衷于使用markdown的乘客,我决定自己造一架航班,让我们一起搭乘M ...
java 3 9 2 6数字排序_GitHub - JourWon/sort-algorithm: 史上最全经典排序算法总结(Java实现)...
史上最全经典排序算法总结(Java实现) 查找和排序算法是算法的入门知识,其经典思想可以用于很多算法当中.因为其实现代码较短,应用较常见.所以在面试中经常会问到排序算法及其相关的问题.但万变不离其宗, ...

史上最全基于vue的图片裁剪vue-cropper使用