vue2.0中使用vue-cropper插件进行上传图片的裁剪
思路：
1、通过el-upload上传图片,取消自动上传，在onChange事件里获取本地取到的图片转成base64格式
2、将转换的的图片传入下方裁剪的组件里
3、获取裁剪完的图片然后自行上传
<el-upload class="upload-demo" style="display:inline-block;"ref="upload"action="":auto-upload="false":show-file-list="false":on-change='openUpdateIcon'><el-button type="primary" icon="el-icon-upload" class="el-upload__text">点击上传</el-button><!-- <div class="el-upload__tip">支持绝大多数图片格式，单张图片最大支持5MB</div> --></el-upload><el-dialog append-to-body :close-on-click-modal="false" title="上传图标" :visible.sync="uploadDia" width="800px" class="icon-dialog-wrapper dialong-com-style"><iconCropper ref="iconShot" v-if="uploadDia" :imgSrc="img"></iconCropper><span slot="footer" class="dialog-footer"><el-button @click="uploadDia = false">取 消</el-button><el-button type="primary" @click="uploadIcon">确 定</el-button></span></el-dialog>//上传的方法openUpdateIcon(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)console.log(file,fileList);this.img = URL.createObjectURL(file.raw)// this.loading = falsethis.uploadDia = true})},
图片裁剪组件，其中vue-cropper插件需要自行下载
npm install vue-cropper
下方组件可以传入上次裁剪保存的location来回显裁剪框上次的位置。
下方组件只需要传入一个base64格式的图片src打开就可以裁剪
裁剪后的图片存在cutImgSrc变量中
<template><div class="iconShot"><div class="icon-dialog"><div class="clip"><div class="img" ref="img"><vue-cropperref="cropper":img="imgSrc":canScale="options.canScale":autoCrop="options.autoCrop":canMove="options.canMove":centerBox="options.centerBox":autoCropWidth="options.autoCropWidth":autoCropHeight="options.autoCropHeight"@realTime="realTime"></vue-cropper></div><div class="previews"><img style="width: 100px;height: 100px;border-radius: 50%;object-fit: cover" :src="cutImgSrc" alt="图标"><!--<el-image--><!-- v-if="cutImgSrc"--><!-- style="width: 100px; height: 100px;vertical-align: middle;border-radius: 50%;"--><!-- :src="cutImgSrc"--><!-- fit="fill"></el-image>--></div></div></div></div></template><script>import {VueCropper} from 'vue-cropper'export default {name:'iconCropper',components:{VueCropper },props:{imgSrc:{type:String,default:''},//回显上次保存的截图的位置location:{type:Object,default(){return {};}},// iconItem:{// type:Object,// default(){//return {};// }// }},data() {return {// 学习截图选项iconForm:{originImgBase64:"",imgBase64: "",// location: "",// matchingName: "",// matchingType: "",// note: "",// picGroupId: "0",// tsId: "",},// 储存截图区域的图片,自己传// imgSrc:'',// 储存截图后的生成的base64图片cutImgSrc: '',// cropper插件的配置options:{canScale:false,autoCrop:true,canMove:false,centerBox:true,autoCropWidth:200,autoCropHeight:200,fixed:true,fixedNumber:[1,1]},// 截图框相对图片的位置clipAxis:{},// 截图回显标志,只触发一次实现回显，flag:true,}},mounted(){},watch:{},methods:{// 学习截图框变化事件realTime(data){if(data.h){// 获取图片相对容器的位置let img=this.$refs.cropper.getImgAxis()// 获取截图框相对容器的位置let clip=this.$refs.cropper.getCropAxis()this.clipAxis.x=clip.x1-img.x1;this.clipAxis.y=clip.y1-img.y1;// 获取截图图片this.$refs.cropper.getCropData(img=>{this.clipAxis.width=data.w;this.clipAxis.height=data.h;this.cutImgSrc=img})// 获取原图base64的图片// this.imageUrlToBase64(data.url);// 图标列表编辑回显(初始化只触发一次)if(this.location.height!=undefined&&this.flag){this.$nextTick(() => {// auto cropthis.$refs.cropper.goAutoCrop()this.$nextTick(() => {// if cropped and has position message, update crop boxthis.$refs.cropper.cropOffsertX = this.location.x+img.x1this.$refs.cropper.cropOffsertY = this.location.y+img.y1this.$refs.cropper.cropW = this.location.widththis.$refs.cropper.cropH =this.location.height// this.iconForm.location=this.iconItem.location;// this.iconForm.matchingName=this.iconItem.matchingName;// this.iconForm.matchingType=this.iconItem.matchingType;// this.iconForm.note=this.iconItem.note;// this.picGroupId=this.iconItem.picGroupId.split(',');// this.iconForm.id=this.iconItem.id;// this.iconForm.tsId=this.iconItem.tsId;this.flag=false;})})}}},// 原图通过canvas转为base64的格式imageUrlToBase64(src) {//一定要设置为let，不然图片不显示let image = new Image();//解决跨域问题image.setAttribute('crossOrigin', 'anonymous');let imageUrl = src;image.src = imageUrl//image.onload为异步加载image.onload = () => {var canvas = document.createElement("canvas");canvas.width = image.width;canvas.height = image.height;var context = canvas.getContext('2d');context.drawImage(image, 0, 0, image.width, image.height);// var quality = 0.8;//这里的dataurl就是base64类型let dataURL = canvas.toDataURL("image/jpeg");//使用toDataUrl将图片转换成jpeg的格式this.iconForm.originImgBase64=dataURL;}},}}</script><style lang="scss" scoped>.iconShot {.icon-dialog {.clip {.img {height: 400px;// display: inline-block;.vue-cropper {background-image: none;}.cropper-move {cursor: default;}.cropper-face.cropper-move {cursor: move;}}.previews {width: 100%;height: 100px;position: relative;>img {position: absolute;left: 50%;transform: translateX(-50%);max-height: 100%;}}}}.icon-options {font-size: 12px;font-weight: 200;>.el-row {>.el-col {>.el-row {height: 36px;line-height: 36px;>.el-col:nth-child(1) {font-weight: 600;text-align: right;}.el-col:nth-child(2) {.el-input,.el-select {width: 185px !important;}}>.el-col {padding: 0 10px;}}}}}}</style>
