1.安装
npm install vue-cropper
2.在任意地方创建一个cropper.vue 组件
import { VueCropper } from 'vue-cropper';
// console.log(VueCropper);
export default {
data () {
return {
previews: {}, // 预览数据
option: {
img: '', // 裁剪图片的地址 (默认:空)
outputSize: 1, // 裁剪生成图片的质量 (默认:1)
full: false, // 是否输出原图比例的截图 选true生成的图片会非常大 (默认:false)
outputType: 'jpg', // 裁剪生成图片的格式 (默认:jpg)
canMove: true, // 上传图片是否可以移动 (默认:true)
original: false, // 上传图片按照原始比例渲染 (默认:false)
canMoveBox: true, // 截图框能否拖动 (默认:true)
centerBox: true, // 截图框是否被限制在图片里面
autoCrop: true, // 是否默认生成截图框 (默认:false)
autoCropWidth: 500, // 默认生成截图框宽度 (默认:80%)
autoCropHeight: 400, // 默认生成截图框高度 (默认:80%)
fixedBox: false, // 固定截图框大小 不允许改变 (默认:false)
fixed: false, // 是否开启截图框宽高固定比例 (默认:true)
fixedNumber: [1.5, 1], // 截图框比例 (默认:[1:1])
enlarge: 1
},
isDisabled: false,
downImg: '#'
};
},
props: ['imgFile', 'fixedNumber','autoCropWH',],
methods: {
changeScale (num) {
// 图片缩放
num = num || 1;
this.$refs.cropper.changeScale(num);
},
rotateLeft () {
// 向左旋转
this.$refs.cropper.rotateLeft();
},
rotateRight () {
// 向右旋转
this.$refs.cropper.rotateRight();
},
Update () {
this.option.autoCropWidth = this.autoCropWH.w ? this.autoCropWH.w : 500
this.option.autoCropHeight = this.autoCropWH.h ? this.autoCropWH.h : 400
this.option.img = this.imgFile.url;
},
realTime (data) {
// 实时预览
this.previews = data;
},
uploadImg (type) {
// 将剪裁好的图片回传给父组件
event.preventDefault();
this.isDisabled = true;
let that = this;
if (type === 'blob') {
this.$refs.cropper.getCropBlob(data => {
that.$emit('upload', data);
});
} else {
this.$refs.cropper.getCropData(data => {
that.$emit('upload', data);
});
}
}
},
components: { VueCropper }
};
.cropper-content {
display: flex;
display: -webkit-flex;
justify-content: flex-end;
-webkit-justify-content: flex-end;
}
.cropper-content .cropper {
width: 500px;
height: 400px;
}
.cropper-content .show-preview {
flex: 1;
-webkit-flex: 1;
display: flex;
display: -webkit-flex;
justify-content: center;
-webkit-justify-content: center;
overflow: hidden;
border: 1px solid #cccccc;
background: #cccccc;
margin-left: 40px;
}
.preview {
overflow: hidden;
border: 1px solid #cccccc;
background: #cccccc;
}
.footer-btn {
margin-top: 30px;
display: flex;
display: -webkit-flex;
justify-content: flex-end;
-webkit-justify-content: flex-end;
}
.footer-btn .scope-btn {
width: 412px;
display: flex;
display: -webkit-flex;
justify-content: space-between;
-webkit-justify-content: space-between;
}
.footer-btn .upload-btn {
flex: 1;
-webkit-flex: 1;
display: flex;
display: -webkit-flex;
justify-content: center;
-webkit-justify-content: center;
}
.footer-btn .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;
margin: 0;
-webkit-transition: 0.1s;
transition: 0.1s;
font-weight: 500;
padding: 8px 15px;
font-size: 12px;
border-radius: 3px;
color: #fff;
background-color: #67c23a;
border-color: #67c23a;
}
3.结合elemnt ui 使用组件
:action="uploadUrl()" accept="image/png,image/jpg,image/jpeg" list-type="picture-card" :limit='1' :auto-upload="false" :on-preview="handlePictureCardPreview" :http-request="upload" :on-change="consoleFL" :file-list="uploadList" >
import Cropper from '../../common/cropper';
import { showLoading, hideLoading,regular,Rodmo} from '../../../utils/loading.js'
export default {
data() {
return {
upfile: '', // 当前被选择的图片文件
autoCropWH:{w:89,h:89},//裁剪的宽高
uploadList:[], //图片显示列表
fixedNumber: [1.5, 1],// 剪裁框比例设置
dialogImageUrl: '',
dialogVisible: false,
cropperModel: false, // 剪裁组件弹窗开关
}
},
updated () {
if (this.$refs.vueCropper) {
this.$refs.vueCropper.Update();
}
},
components: { //注册组件
Cropper
},
methods: {
uploadUrl(){ //上传路径
return '这里写自己的路径'
},
beforeClose () { //关闭弹窗
this.cropperModel = false;
},
consoleFL (file, fileList) {// 弹出剪裁框,将当前文件设置为文件
this.cropperModel = true;
this.upfile = file;
},
async upload (data) { // 自定义upload事件
let fileimg = ''
fileimg = await this.base64ToFile(data,this.upfile.name) //将base64图片转成文件类型
if(fileimg != ''){
let param = new FormData()
let imgurl = window.URL.createObjectURL(fileimg) //拿到截取的图片数据路径
param.append('file',fileimg) //添加FormData对象
this.imgUpload(param,imgurl);
}
},
handlePictureCardPreview(file) { //点击文件列表中已上传的文件时
this.dialogImageUrl = file.url;
this.dialogVisible = true;
},
async imgUpload(formData,imgurl) { //自定义图片上传
let url = this.uploadUrl()
this.$axios.post(url,formData,{ headers: { 'Content-Type': 'multipart/form-data' } }).then(res => {
setTimeout(function() {
hideLoading()
}, 200)
if(!res.data.Code) {
let p = {}
p.url = imgurl
this.uploadList = [p] //将截取的图片数据路径赋值给显示数组
this.$refs.vueCropper.isDisabled = false;
this.$message({ message: res.data.Msg, type: 'success' }); //elemnt ui成功提示
} else {
this.$alert(res.data.Msg, '错误提醒', {
confirmButtonText: '确定',
callback: action => {
}
});
}
})
this.cropperModel = false; //关掉弹窗
},
base64ToFile(urlData, fileName) { //将base64转换为file
let arr = urlData.split(',');
let mime = arr[0].match(/:(.*?);/)[1];
let bytes = atob(arr[1]); // 解码base64
let n = bytes.length
let ia = new Uint8Array(n);
while (n--) {
ia[n] = bytes.charCodeAt(n);
}
return new File([ia], fileName, { type: mime });
},
},
}