极客观点
项目管理
HarmonyOS
项目需要使用截图功能，于是引入了vue-cropper插件
但是现在裁剪后上传的图片尺寸与预设截图框尺寸不符
通过autoCropWidth和autoCropHeight设置的截图框大小完全不生效。
例如在父组件中设置截图框大小为 1248*702
但是实际输出的截图框会受到该组件父容器大小的影响
例如该组件的dialog父容器比较大，他就会就会变成1560*878
父容器小一些他有可能变成1188*668
问题是16:9的比例后台会做校验，1560*878，1188*668尺寸后台都会报错啊
人已经快傻了
为啥设置的宽高一点不起效果呢
<template>
<div class="cropper-content">
<div class="cropper-box">
<div class="flex-row-center-center title">
<div style="margin-right:20px">剪裁比例</div>
<div v-if="optionalProportion">
<el-button size="mini" @click="formatCropper(index)" v-for="(item, index) in optionalProportion">{{
formatScale(item)
}}
</el-button>
</div>
<div v-else>
<el-button size="mini" disabled>{{ formatScale(fixedNumber) }}</el-button>
</div>
</div>
<div class="cropper" :style="`height: ${height}px`">
<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="option.original" :centerBox="option.centerBox"
:height="option.height" :infoTrue="option.infoTrue" :maxImgSize="option.maxImgSize" :enlarge="option.enlarge"
:mode="option.mode" @imgLoad="imgLoad">
</vue-cropper>
</div>
<!--底部操作工具按钮-->
<div class="footer-btn">
<div class="scope-btn">
<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>
</template>
<script>
import { VueCropper } from 'vue-cropper'
export default {
name: "CropperImage",
components: {
VueCropper
},
props: {
image: {
required: true
},
autoCropWidth: {
type: Number,
default: 480,
},
autoCropHeight: {
type: Number,
default: 360,
},
height: {
type: Number,
default: 750,
},
fixedNumber: {
type: Array,
default: () => {
return [4, 3]
},
},
optionalProportion: {
type: Array,
},
optionalSize: {
type: Array,
}
},
data() {
return {
option: {
img: '', //裁剪图片的地址
outputSize: 1, //裁剪生成图片的质量(可选0.1 - 1)
outputType: 'jpeg', //裁剪生成图片的格式（jpeg || png || webp）
info: true, //图片大小信息
canScale: true, //图片是否允许滚轮缩放
autoCrop: true, //是否默认生成截图框
autoCropWidth: this.autoCropWidth, //默认生成截图框宽度
autoCropHeight: this.autoCropHeight, //默认生成截图框高度
fixed: true, //是否开启截图框宽高固定比例
fixedNumber: this.fixedNumber, //截图框的宽高比例
fixedBox: true, //固定截图框大小，不允许改变
canMove: true, //上传图片是否可以移动
canMoveBox: true, //截图框能否拖动
centerBox: false, //截图框是否被限制在图片里面
full: false, //false按原比例裁切图片，不失真
original: false, //上传图片按照原始比例渲染
height: true, //是否按照设备的dpr输出等比例图片
infoTrue: true, //true为展示真实输出图片宽高，false展示看到的截图框宽高
maxImgSize: 2000, //限制图片最大宽度和高度
enlarge: 1.00, //图片根据截图框输出比例倍数
mode: '100%' //图片默认渲染方式
}
};
},
watch: {
image: function (newValue) {
setTimeout(() => {
this.option.img = newValue
}, 100);
}
},
methods: {
//初始化函数
imgLoad(msg) {
},
//图片缩放
changeScale(num) {
num = num || 1
this.$refs.cropper.changeScale(num)
},
//向左旋转
rotateLeft() {
this.$refs.cropper.rotateLeft()
},
//向右旋转
rotateRight() {
this.$refs.cropper.rotateRight()
},
//上传图片
uploadImg(type) {
console.log(this.autoCropWidth, this.autoCropHeight);
return
if (type === 'blob') {
//获取截图的blob数据
this.$refs.cropper.getCropBlob(async (data) => {
var url = window.URL.createObjectURL(data)
var link = document.createElement('a')
link.href = url;
link.setAttribute('download', "results.jpeg")
link.click();
let formData = new FormData();
let file = new File([data], 'uploadImage.png', { type: 'image/jpeg', lastModified: Date.now() })
formData.append('file', file)
this.$emit('upload', formData)
})
}
},
formatScale(arr) {
if (arr) {
return `${arr[0]}: ${arr[1]}`
}
},
formatCropper(index) {
this.option.autoCropWidth = this.optionalSize[index][0]
this.option.autoCropHeight = this.optionalSize[index][1]
this.option.fixedNumber = this.optionalProportion[index]
this.option.containerHeight = this.optionalSize[index][1]
this.$refs.cropper.goAutoCrop()
}
},
}
</script>
<style scoped lang="scss">
.title {
margin-bottom: 20px;
}
.cropper-content {
display: flex;
display: -webkit-flex;
justify-content: flex-end;
.cropper-box {
flex: 1;
width: 100%;
.cropper {
width: auto;
}
}
.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;
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;
-webkit-transition: .1s;
transition: .1s;
font-weight: 500;
padding: 8px 15px;
font-size: 12px;
border-radius: 3px;
color: #fff;
background-color: #409EFF;
border-color: #409EFF;
margin-right: 10px;
}
}
</style>这是整个组件……
找了一天了，完全没有解决的头绪
解决了……
人有点麻，
不是缩放比例没有效，而是enlarge值为1的时候不生效……
enlarge设成2，然后把裁剪框的尺寸autoCropWidth和autoCropHeight设成预计导出图的一半
再把infoTrue设成true就行了