需求:固定图片宽度,选择不同的裁剪比例,剪裁成对应的图片。
<template>
<div class="cropper-container">
<el-dialog title="图片剪裁" :visible.sync="show" @open="openHandle" @close="closeHandle" append-to-body width="950px" center>
<div class="top-btn">
图片剪裁宽高比例:<el-radio-group v-model="imgStyle" @change="styleChange">
<el-radio :label="1">4:3</el-radio>
<el-radio :label="2">3:4</el-radio>
<el-radio :label="3">1:1</el-radio>
</el-radio-group>
<span style="margin-left:30px">当前图片尺寸:{{option.autoCropWidth}} x {{option.autoCropHeight}}px</span>
</div>
<div class="cropper-content">
<vue-cropper ref="cropper" :img="option.img" :autoCrop="option.autoCrop" :autoCropWidth="option.autoCropWidth" :autoCropHeight="option.autoCropHeight" :outputSize="option.outputSize" :outputType="option.outputType" :info="option.info" :canScale="option.canScale" :fixed="option.fixed" :fixedNumber="option.fixedNumber" :full="option.full" :fixedBox="option.fixedBox" :canMove="option.canMove" :canMoveBox="option.canMoveBox" :original="option.original" :centerBox="option.centerBox" :height="option.height" :infoTrue="option.infoTrue" :maxImgSize="option.maxImgSize" :enlarge="option.enlarge" :mode="option.mode" @realTime="realTime" @imgLoad="imgLoad">
</vue-cropper>
</div>
<!-- 预览图片 -->
<!-- <img :src="previewHTML.url" /> -->
<!--底部操作工具按钮-->
<div class="footer-btn">
<el-button type="danger" plain icon="el-icon-zoom-in" @click="changeScale(1)">放大</el-button>
<el-button type="danger" plain icon="el-icon-zoom-out" @click="changeScale(-1)">缩小</el-button>
<el-button type="danger" plain @click="rotateLeft">↺ 左旋转</el-button>
<el-button type="danger" plain @click="rotateRight">↻ 右旋转</el-button>
<!-- <el-button type="success" @click="uploadImgHandle('blob')">上传图片 <i class="el-icon-upload"></i></el-button> -->
</div>
<div slot="footer" class="dialog-footer">
<el-button @click="closeHandle">取 消</el-button>
<el-button type="primary" @click="uploadImgHandle" :loading="submitLoading">确认</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
import { VueCropper } from 'vue-cropper'
import { uploadObject } from '@/utils/upload'
export default {
name: "CropperImage",
components: {
VueCropper
},
data () {
return {
show: this.visible,
name: this.Name,
imgStyle: 1,
submitLoading: false,
// 裁剪组件的基础配置option
option: {
img: '', //裁剪图片的地址
outputSize: 1, //裁剪生成图片的质量(可选0.1 - 1)
outputType: 'png', //裁剪生成图片的格式(jpeg || png || webp)
info: true, //裁剪框的大小信息,图片大小信息
// full: true, //是否输出原图比例的截图,false按原比例裁切图片,不失真
height: true, //是否按照设备的dpr 输出等比例图片
maxImgSize: 2000, // 限制图片最大宽度和高度
enlarge: 1, //图片根据截图框输出比例倍数
canScale: true, // 图片是否允许滚轮缩放 默认true
autoCrop: true, // 是否默认生成截图框 默认false
canMove: true, //上传图片是否可以移动 默认true
autoCropWidth: 200, //默认生成截图框宽度 容器的80% 0~max
autoCropHeight: 200, //默认生成截图框高度 容器的80% 0~max
fixedBox: true, // 固定截图框大小 不允许改变 false true | false
fixed: true, //是否开启截图框宽高固定比例
original: false, // 上传图片按照原始比例渲染 false true | false
infoTrue: false, // 为展示真实输出图片宽高 false 展示看到的截图框宽高 false true | false
centerBox: true, // 截图框是否被限制在图片里面 false true | false
canMoveBox: true, //截图框能否拖动 true true | false
fixedNumber: [1, 1] // 截图框的宽高比例 [宽度, 高度]
},
previewHTML: {}
};
},
props: {
visible: {
type: Boolean,
default: false
},
cropperImgInfo: {
type: Object,
default: () => {
type: 1
imgUrl: ''
width: 1125
}
}
},
watch: {
visible () {
this.show = this.visible
}
},
methods: {
openHandle () {
this.option.img = this.cropperImgInfo.imgUrl
this.styleChange()
// console.log('this.cropperImgInfo', this.cropperImgInfo)
},
styleChange () {
switch (this.imgStyle) {
case 1:
this.option.fixedNumber = [4, 3]
this.option.autoCropWidth = this.cropperImgInfo.width
this.option.autoCropHeight = Math.round((this.cropperImgInfo.width * 3) / 4)
break;
case 2:
this.option.fixedNumber = [3, 4]
this.option.autoCropWidth = this.cropperImgInfo.width
this.option.autoCropHeight = Math.round((this.cropperImgInfo.width * 4) / 3)
break;
case 3:
this.option.fixedNumber = [1, 1]
this.option.autoCropWidth = this.cropperImgInfo.width
this.option.autoCropHeight = this.cropperImgInfo.width
break;
}
console.log(this.option.fixedNumber)
console.log(this.option.autoCropWidth)
console.log(this.option.autoCropHeight)
},
//初始化函数
imgLoad (msg) {
console.log("初始化函数===" + msg)
},
//图片缩放
changeScale (num) {
num = num || 1
this.$refs.cropper.changeScale(num)
},
//向左旋转
rotateLeft () {
this.$refs.cropper.rotateLeft()
},
//向右旋转
rotateRight () {
this.$refs.cropper.rotateRight()
},
//实时预览函数
realTime (data) {
this.previewHTML = data
},
// 鼠标进入VueCropper,开始剪裁
enterHandle () {
// @mouseenter="enterHandle"
if (this.option.img == "") {
return
}
this.$refs.cropper.startCrop(); //开始裁剪
},
// 鼠标离开VueCropper,停止裁剪
leaveHandle () {
// @mouseleave="leaveHandle"
this.$refs.cropper.stopCrop();//停止裁剪
},
leaveCard () {
this.$refs.cropper.clearCrop() // 取消裁剪框,清除截图
},
//上传图片
uploadImgHandle () {
// this.$refs.cropper.getCropData(data => { //获取截图的base64格式数据
// this.cutImg = data;
// });
this.$refs.cropper.getCropBlob((data) => { // 获取截图的Blob格式数据
let fileName = new Date().getTime() + '.' + data.type.substr(6) // 给文件名加后缀
let file = new window.File([data], fileName, { type: 'image/png' }) // blob转file
// 上传图片到服务器
});
},
closeHandle () {
this.$emit('update:visible', false)
}
}
}
</script>
<style scoped lang="less">
.cropper-content {
width: 100%;
height: 300px;
}
.top-btn {
margin-bottom: 10px;
text-align: center;
}
.footer-btn {
margin-top: 10px;
text-align: center;
}
</style>
页面效果: