1.npm install vue-cropper
2.main.js引入
import VueCropper from ‘vue-cropper’
Vue.use(VueCropper)
3.新建cropper.vue文件
<template>
<div id="demo">
<p style="color:red">Tips:鼠标滚轮放大缩小图片</p>
<div class="cropper-content">
<div class="cropper" :style='"width:"+capsize[0]==200?500:1600+"px"'>
<VueCropper ref="cropper" :img="imgcarpsurl" :outputSize="option.size" :outputType="option.outputType" :info="true" :full="option.full" :canMove="option.canMove" :canMoveBox="option.canMoveBox" :original="option.original" :autoCrop="option.autoCrop" :infoTue ="true" :autoCropWidth="capsize[0]" :autoCropHeight="capsize[1]" :fixedBox="option.fixedBox" @realTime="realTime" @imgLoad="imgLoad"></VueCropper>
</div>
</div>
<div class="footer-btn">
<div class="upload-btn">
<button class="btn" @click="down('blob')">确定</button>
</div>
</div>
</div>
</template>
<script>
import { VueCropper } from 'vue-cropper'
import { imgUpload } from '@/api/other'
export default {
name:'Cropper',
props:['imgcarpsurl','capsize'],
components: {
VueCropper,
},
data() {
return {
crap:false,
previews: {},
option: {
img: '',
size: 1,
full: false,
//输出原图比例截图 props名full
outputType: 'png',
canMove: true,
original: false,
canMoveBox: true,
autoCrop: true,
autoCropWidth: 200,
autoCropHeight: 200,
fixedBox: true
},
downImg: '#',
};
},
methods: {
changeScale(num) {
num = num || 1
this.$refs.cropper.changeScale(num)
},
rotateLeft() {
this.$refs.cropper.rotateLeft()
},
rotateRight() {
this.$refs.cropper.rotateRight()
},
finish(type) { // 输出 //
var test = window.open('about:blank') //
test.document.body.innerHTML = '图片生成中..'
if (type === 'blob') {
this.$refs.cropper.getCropBlob((data) => {
var img = window.URL.createObjectURL(data)
this.model = true
this.modelSrc = img
})
} else {
this.$refs.cropper.getCropData((data) => {
this.model = true
this.modelSrc = data
})
}
}, // 实时预览函数
realTime (data) {
this.previews = data
},
down (type) { //
event.preventDefault()
var aLink = document.createElement('a')
aLink.download = 'author-img' // 输出
this.$refs.cropper.getCropData((data) => {
var base64String = data;
var bytes = window.atob(base64String.split(',')[1]);
var ab = new ArrayBuffer(bytes.length);
var ia = new Uint8Array(ab);
for(var i = 0; i < bytes.length; i++){
ia[i] = bytes.charCodeAt(i);
}
//Blob对象
var blob = new Blob([ab], {type: 'image/jpeg'});
//FormData对象
var fd = new FormData();
//TDOD Ajax或者其他方式上传FormData对象
fd.append('file',blob, Date.now() + '.jpg');
imgUpload(fd).then(res=>{
console.log(res)
if(res.data.code==200){
if(this.capsize[0]==200){
this.$emit('uploads1',res.data.data.file_id)
}else{
this.$emit('uploads2',res.data.data.file_id)
}
}
})
})
},
}
}
</script>
<style>
#demo .vue-cropper{
background-size:100% 100%;
}
</style>
<style lang="less" scoped>
.cropper-content{
.cropper{
height: 500px;
}
.show-preview{
flex: 1;
-webkit-flex: 1;
display: flex;
display: -webkit-flex;
justify-content: center;
-webkit-justify-content: center;
.preview{
overflow: hidden;
border-radius: 50%;
border:1px solid #cccccc;
background: #cccccc;
margin-left: 40px;
}
}
}
.footer-btn{
margin-top: 30px;
display: flex;
display: -webkit-flex;
justify-content: flex-end;
-webkit-justify-content: flex-end;
.scope-btn{
width: 350px;
display: flex;
display: -webkit-flex;
justify-content: space-between;
-webkit-justify-content: space-between;
}
.upload-btn{
flex: 1;
-webkit-flex: 1;
display: flex;
display: -webkit-flex;
justify-content: center;
-webkit-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;
margin: 0;
-webkit-transition: .1s;
transition: .1s;
font-weight: 500;
padding: 8px 15px;
font-size: 12px;
border-radius: 3px;
color: #fff;
background-color: #67c23a;
border-color: #67c23a;
}
}
</style>
4.index.vue引用
<Cropper :imgcarpsurl='imgcarpsurl' @uploads1='uploads1' @uploads2='uploads2' :capsize='capsize'></Cropper>