安装依赖
npm install vue-cropper --save-dev
前端代码
注意: 前端我是使用了VUE+IVIEW,有些标签可能需要先引入iview才不会报错,例如Row 和Col
<template>
<div id="imageCropper">
<Row class="mt-2">
<Col>
<Button type="default" @click="changeScale(1)" ghost><i class="el-icon-zoom-in"></i>放大</Button>
<Button type="default" @click="changeScale(-1)" ghost><i class="el-icon-zoom-out"></i>缩小</Button>
<Button type="default" @click="rotateLeft" ghost icon="ios-return-left">左旋转</Button>
<Button type="default" @click="rotateRight" ghost icon="ios-return-right">右旋转</Button>
<label class="ivu-btn ivu-btn-primary" 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="uploadImg($event, 1)">
<Button type="success" @click="uploadHeaderPic">上传到服务器</Button>
</Col>
</Row>
<Row class="mt-3">
<Col :lg="12" :md="12">
<div>
<div style="width: 336px;height: 336px">
<VueCropper
ref="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"
:autoCropWidth="option.autoCropWidth"
:autoCropHeight="option.autoCropHeight"
:fixedBox="option.fixedBox"
@realTime="realTime"
@imgLoad="imgLoad"
></VueCropper>
</div>
</div>
</Col>
<Col :lg="12" :md="12">
<div style="margin-left:20px;">
<div :style="previews.div" class="ui medium circular image">
<img :src="previews.url" :style="previews.img">
</div>
</div>
</Col>
</Row>
<Row class="mt-3">
<Col :lg="24" :md="24">
<el-input v-model="userDiyPicUrl" placeholder="自定义头像地址" ></el-input>
</Col>
</Row>
</div>
</template>
脚本
<script>
import FILE_API from '../../api/api_file'
import axios from "axios";
export default {
name: "imageCropper",
data(){
return {
// 用户自定义头像地址
userDiyPicUrl:'',
headImg:'',
//剪切图片上传
crap: false,
previews: {
url:''
},
option:{
img: '',
size: 1,
full: false,
outputType: 'png',
canMove: true,
fixedBox: true,
original: false,
canMoveBox: true,
autoCrop: true,
// 只有自动截图开启 宽度高度才生效
autoCropWidth: 120,
autoCropHeight: 120,
centerBox: false,
high: true
},
fileName:'', //本机文件地址
downImg: '#',
imgFile:'',
uploadImgRelaPath:'', //上传后的图片的地址(不带服务器域名)
}
},
methods:{
// 实时预览函数
realTime(data) {
this.previews = data
},
//坐旋转
rotateLeft() {
this.$refs.cropper.rotateLeft();
},
//右旋转
rotateRight() {
this.$refs.cropper.rotateRight();
},
imgLoad (msg) {
},
//放大/缩小
changeScale(num) {
num = num || 1;
this.$refs.cropper.changeScale(num);
},
//上传图片
uploadImg(e, num) {
let $this = this;
// this.option.img
let file = e.target.files[0]
if (!/\.(gif|jpg|jpeg|png|bmp|GIF|JPG|PNG)$/.test(e.target.value)) {
alert('图片类型必须是.gif,jpeg,jpg,png,bmp中的一种')
return false
}
$this.fileName = file.name;
let reader = new FileReader()
reader.onload = (e) => {
let data
if (typeof e.target.result === 'object') {
// 把Array Buffer转化为blob 如果是base64不需要
data = window.URL.createObjectURL(new Blob([e.target.result]))
} else {
data = e.target.result
}
$this.option.img = data
}
// 转化为base64
// reader.readAsDataURL(file)
// 转化为blob
reader.readAsArrayBuffer(file)
},
uploadHeaderPic(){
let $this = this;
$this.$refs.cropper.getCropBlob((data) => {
let formData = new FormData();
let img = window.URL.createObjectURL(data);
console.log("上传文件名:"+this.fileName);
formData.append("file", data, this.fileName);
axios({
url: FILE_API.getImgUploadUrl(),
method: 'post',
data: formData,
headers: { 'Content-Type': 'multipart/form-data;charset=utf-8' },
}).then((jsonData) => {
console.log("图片上传结果:"+JSON.stringify(jsonData.data));
let fileUrl = jsonData.data.fileUrl;
$this.userDiyPicUrl = fileUrl;
});
});
}
},
mounted() {
}
}
</script>
css样式
<style scoped>
.info {
width: 720px;
margin: 0 auto;
}
.oper-dv {
height:20px;
text-align:right;
margin-right:100px;
}
.cropper-content{
display: flex;
display: -webkit-flex;
justify-content: flex-end;
-webkit-justify-content: flex-end;
}
.cropper{
width: 360px;
height: 360px;
}
.btn {
display: inline-block;
line-height: 1;
white-space: nowrap;
cursor: pointer;
background: #fff;
border: 1px solid #c0ccda;
color: #1f2d3d;
text-align: center;
box-sizing: border-box;
outline: none;
margin:20px 10px 0px 0px;
padding: 9px 15px;
font-size: 14px;
border-radius: 4px;
color: #fff;
background-color: #50bfff;
border-color: #50bfff;
transition: all .2s ease;
text-decoration: none;
user-select: none;
}
</style>