一、安装依赖
cnpm install vue-cropper
二、main.js中引用
// 图片裁剪
import VueCropper from 'vue-cropper'
Vue.use(VueCropper)
三、引入elementui(可参考mosaic项目)
看引入elementui的文章
四、代码引入
<template>
<div class="upImage">
<el-button class="btn-upload" type="primary" @click="visible = true">上传图片</el-button>
<p class="word" v-if="showWord">宇航N 1!<br>宇航厉害的一批</p>
<img class="finishImg" :src="finishImg" alt="">
<el-dialog
class="dialog"
title="上传图片"
:visible.sync="visible"
width="800"
:before-close="handleClose">
<el-row>
<el-col class="preview" :span="24">
<div class="upload-preview">
<img :src="previews.url" :style="previews.img" v-show="previews.url"/>
</div>
</el-col>
</el-row>
<el-row>
<el-col class="cropper" :span="24">
<vue-cropper
ref="cropper"
:img="options.img"
:canScale="options.canScale"
:original="options.original"
:autoCrop="options.autoCrop"
:autoCropWidth="options.autoCropWidth"
:autoCropHeight="options.autoCropHeight"
:fixedBox="options.fixedBox"
:centerBox="options.centerBox"
@realTime="realTime"
>
</vue-cropper>
<div class="btnS">
<!-- <div class="upload"> -->
<el-upload
ref="uploadCropper"
:before-upload="beforeAvatarUpload"
:show-file-list="false"
action="/"
style="margin-right: 10px;"
>
<el-button type="primary" size="small">上传头像</el-button>
</el-upload>
<!-- </div>
<div class="rotate"> -->
<el-tooltip class="item" effect="dark" content="向左旋转" placement="top">
<el-button size="small" @click="rotateLeft"><i class="el-icon-refresh-left"></i></el-button>
</el-tooltip>
<el-tooltip class="item" effect="dark" content="向右旋转" placement="top">
<el-button size="small" @click="rotateRight"><i class="el-icon-refresh-right"></i></el-button>
</el-tooltip>
<!-- </div>
<div class="change"> -->
<el-tooltip class="item" effect="dark" content="放大" placement="top">
<el-button size="small" @click="changeScale(1)"><i class="el-icon-plus"></i></el-button>
</el-tooltip>
<el-tooltip class="item" effect="dark" content="缩小" placement="top">
<el-button size="small" @click="changeScale(-1)"><i class="el-icon-minus"></i></el-button>
</el-tooltip>
<!-- </div> -->
</div>
</el-col>
</el-row>
<span slot="footer" class="dialog-footer">
<el-button @click="visible = false" size="small">取 消</el-button>
<el-button type="primary" :loading="loading" @click="submitUpdate" size="small">确 定</el-button>
</span>
</el-dialog>
</div>
</template>
<script>
import { VueCropper } from 'vue-cropper'
export default {
name: 'upImage',
components: {
VueCropper
},
data() {
return {
showWord: false, // 是否显示字
finishImg: '', // 裁剪好的图片
visible: false,
options: {
img: '', //裁剪图片的地址
info: true, //裁剪框的大小信息
original: false, // 上传图片是否显示原始宽高 (针对大图 可以铺满)
outputSize: 0.8, // 裁剪生成图片的质量
outputType: '', // 裁剪生成图片的格式
canScale: true, // 图片是否允许滚轮缩放
autoCrop: true, //是否默认生成截图框
autoCropWidth: 150, //默认生成截图框宽度
autoCropHeight: 150,
fixedBox: true, // 固定截图框大小 是否不允许改变
fixed: false, //是否开启截图框宽高固定比例
fixedNumber: [1, 1], //截图框的宽高比例
centerBox: true, // 截图框是否被限制在图片里面
infoTrue: true // true 为展示真实输出图片宽高 false 展示看到的截图框宽高
},
previews: {},
loading: false,
fileList: [],
uploadAccept: ['jpeg', 'jpg', 'png']
}
},
methods: {
// 实时预览函数
realTime(data) {
this.previews = data
console.log(this.previews,"this.previews")
},
handleClose() {
this.visible = false
},
beforeAvatarUpload(file) {
// 此处的上传file有多种处理方式
console.log(file,"file")
let type = file.type.split('/')[1];
if (this.uploadAccept.indexOf(type) > -1) {
// 上传允许的类型之内
const reader = new FileReader()
// 把Array Buffer转化为blob 如果是base64不需要
// 转化为base64
reader.readAsDataURL(file)
reader.onload = () => {
this.options.img = reader.result
}
} else {
this.$message.warning("您上传的图片格式不符,请重新上传")
}
},
changeScale (num) {
console.log(num)
this.$refs.cropper.changeScale(num)
},
rotateLeft () {
this.$refs.cropper.rotateLeft()
},
rotateRight () {
this.$refs.cropper.rotateRight()
},
submitUpdate() {
// this.loading = true
this.$refs.cropper.getCropData((base64) => {
console.log(base64,"base64")
this.finishImg = base64
this.showWord = true
this.visible = false
// this.uploadImg(base64);
});
},
uploadImg() {
// 发送ajax请求
}
},
}
</script>
<style lang="scss" scoped>
::v-deep.upImage {
width: 100vw;
min-height: 100vh;
background-color: skyblue;
padding-top: 8vw;
.btn-upload {
width: 24vw;
height: 11.733333vw;
display: block;
margin: auto;
}
.word {
font-size: 28px;
color: snow;
text-align: center;
margin-top: 10vw;
}
.finishImg {
width: 30vw;
display: block;
margin: 20vw auto;
}
.el-dialog{
width: 90vw;
margin: 0 auto;
background-color: skyblue;
.el-dialog__header{
border-bottom: 1px solid
}
.el-dialog__body{
width: 90vw!important;
padding: 0;
.preview {
height: 200px;
.upload-preview {
box-sizing: content-box;
width: 150px;
height: 150px;
margin: 20px auto;
box-shadow: 0 0 4px
overflow: hidden;
img {
width: 100%;
height: 100%;
}
}
}
.cropper {
margin: 0 0 60px;
height: 250px;
.btnS{
display: flex;
padding: 20px 10px;
i{
font-size: 12px;
}
}
}
}
.dialog-footer {
}
}
}
</style>