vue图⽚裁切功能
<template>
<div class="cropper-content">
<div class="cropper-box">
<div class="cropper">
<vue-cropper
ref="cropper"
:img="option.img"
:outputSize="option.outputSize"
:outputType="option.outputType"
:info="option.info"
:
canScale="option.canScale"
:autoCrop="option.autoCrop"
:autoCropWidth="option.autoCropWidth"
:autoCropHeight="option.autoCropHeight"
:fixed="option.fixed"
:fixedNumber="option.fixedNumber"
:full="option.full"
:fixedBox="option.fixedBox"
:canMove="option.canMove"
:canMoveBox="option.canMoveBox"
:original="iginal"
:
centerBox="Box"
:height="option.height"
:infoTrue="option.infoTrue"
:maxImgSize="option.maxImgSize"
:enlarge="large"
如何加强团队建设
:mode="de"
@realTime="realTime"
@imgLoad="imgLoad">
</vue-cropper>
</div>
<!--底部操作⼯具按钮-->
<div class="footer-btn">
<div class="scope-btn">
<label class="btn" for="uploads">选择封⾯</label>
<input type="file" id="uploads" accept="image/png, image/jpeg, image/gif, image/jpg" @change="lectImg($event)"> <el-button size="mini" type="danger" plain icon="el-icon-zoom-in" @click="changeScale(1)">放⼤</el-button>
<el-button size="mini" type="danger" plain icon="el-icon-zoom-out" @click="changeScale(-1)">缩⼩</el-button>
<el-button size="mini" type="danger" plain @click="rotateLeft">↺左旋转</el-button>含羞草的生长过程
<el-button size="mini" type="danger" plain @click="rotateRight">↻右旋转</el-button>
</div>
<div class="upload-btn">
<el-button size="mini" type="success" @click="uploadImg('blob')">上传封⾯ <i class="el-icon-upload"></i></el-button>
</div>
</div>
</div>
<!--预览效果图-->
<div class="show-preview">
<div : class="preview">
<img :src="previews.url" :>
</div>
</div>
</div>
</template>
<script>
import { VueCropper } from 'vue-cropper'
export default {
name: "CropperImage",
components: {
VueCropper
},
props:['Name'],
data() {
return {
name:this.Name,
previews: {},
option:{
img: '', //裁剪图⽚的地址
outputSize: 1, //裁剪⽣成图⽚的质量(可选0.1 - 1)
outputType: 'jpeg', //裁剪⽣成图⽚的格式（jpeg || png || webp）
info: true, //图⽚⼤⼩信息
canScale: true, //图⽚是否允许滚轮缩放
autoCrop: true, //是否默认⽣成截图框
autoCropWidth: 230, //默认⽣成截图框宽度
autoCropHeight: 150, //默认⽣成截图框⾼度
fixed: true, //是否开启截图框宽⾼固定⽐例
fixedNumber: [1.53, 1], //截图框的宽⾼⽐例
full: fal, //fal按原⽐例裁切图⽚，不失真
fixedBox: true, //固定截图框⼤⼩，不允许改变
canMove: fal, //上传图⽚是否可以移动
canMoveBox: true, //截图框能否拖动
original: fal, //上传图⽚按照原始⽐例渲染
centerBox: fal, //截图框是否被限制在图⽚⾥⾯
height: true, //是否按照设备的dpr 输出等⽐例图⽚
infoTrue: fal, //true为展⽰真实输出图⽚宽⾼，fal展⽰看到的截图框宽⾼ maxImgSize: 3000, //限制图⽚最⼤宽度和⾼度
enlarge: 1, //图⽚根据截图框输出⽐例倍数
mode: '230px 150px' //图⽚默认渲染⽅式
}
};
},
methods: {
//初始化函数
imgLoad (msg) {
console.log("⼯具初始化函数====="+msg)
},
百日冲刺口号
//图⽚缩放
四年级下册英语书单词
changeScale (num) {
num = num || 1
this.$pper.changeScale(num)
},
//向左旋转
rotateLeft () {
this.$ateLeft()
},
//向右旋转
rotateRight () {
this.$ateRight()
},
/
/实时预览函数
realTime (data) {
this.previews = data
},
//选择图⽚
lectImg (e) {
let file = e.target.files[0]
if (!/\.(jpg|jpeg|png|JPG|PNG)$/.test(e.target.value)) {
this.$message({
message: '图⽚类型要求：jpeg、jpg、png',
type: "error"
});
return fal
}
//转化为blob
let reader = new FileReader()
let data
if (typeof sult === 'object') {
data = ateObjectURL(new Blob([sult]))
} el {
data = sult
}
this.option.img = data
}
//转化为ba64
},
//上传图⽚
uploadImg (type) {
let _this = this;
if (type === 'blob') {
if (type === 'blob') {
/
/获取截图的blob数据
this.$CropBlob(async (data) => {
let formData = new FormData();
formData.append('file',data,"DX.jpg")
//调⽤axios上传
let {data: res} = await _this.$http.post('/api/file/imgUpload', formData) de === 200){
_this.$message({
message: res.msg,
type: "success"
});
小茴香功效
let data = place('[','').replace(']','').split(',');
let imgInfo = {
name : _this.Name,
url : data[0]
};
_this.$emit('uploadImgSuccess',imgInfo);
}el {
_this.$message({
message: '⽂件服务异常，请联系管理员！',
水蚤怎么养type: "error"
});
}
})
}
},
},
}
</script>
<style scoped lang="less">
.cropper-content{
display: flex;
display: -webkit-flex;
justify-content: flex-end;
蓝莓果冻.
cropper-box{
flex: 1;
width: 100%;
.cropper{
width: auto;
height: 300px;
}
}
.show-preview{
flex: 1;
-webkit-flex: 1;
display: flex;
display: -webkit-flex;
justify-content: center;
.preview{
overflow: hidden;
border:1px solid #67c23a;
background: #cccccc;
}
}
}
.footer-btn{
margin-top: 30px;
display: flex;
display: -webkit-flex;
justify-content: flex-end;
.scope-btn{
display: flex;
祝老人的祝福语display: -webkit-flex;
justify-content: space-between;
padding-right: 10px;
}
.upload-btn{
flex: 1;
-webkit-flex: 1;
display: flex;
display: -webkit-flex;
