vue-image-crop-upload
vue-image-crop-upload copied to clipboard
上传图片与设置的宽高比例相同时,修改部分源码
trafficstars
upload-2.vue


若上传裁剪图片的width/height的与原图容器宽高的比例相同,主要修改原图蒙版属性 sourceImgMasking和原图遮罩样式sourceImgShadeStyle的代码
// 原图蒙版属性
sourceImgMasking() {
let { width, height, ratio, sourceImgContainer } = this,
sic = sourceImgContainer,
sicRatio = sic.width / sic.height, // 原图容器宽高比
x = 0,
y = 0,
w = sic.width,
h = sic.height,
scale = 1,
// 添加是否相同比例开关
isEqualRatio = false;
if (ratio < sicRatio) {
scale = sic.height / height;
w = sic.height * ratio;
x = (sic.width - w) / 2;
}
if (ratio > sicRatio) {
scale = sic.width / width;
h = sic.width / ratio;
y = (sic.height - h) / 2;
}
// 比例相同的情况下 添加修改
if (ratio === sicRatio) {
isEqualRatio = true;
scale = sic.height / height;
w = sic.height * ratio;
x = (sic.width - w) / 2;
}
return {
scale, // 蒙版相对需求宽高的缩放
x,
y,
width: w,
height: h,
isEqualRatio
};
},
// 原图遮罩样式
sourceImgShadeStyle() {
let { sourceImgMasking, sourceImgContainer } = this,
sic = sourceImgContainer,
sim = sourceImgMasking,
w = sim.width == sic.width ? sim.width : (sic.width - sim.width) / 2,
h = sim.height == sic.height ? sim.height : (sic.height - sim.height) / 2;
// 添加相同比例时返回的遮罩的宽高为0
if (sim.isEqualRatio) {
return {
width: '0px',
height: '0px'
};
}
return {
width: w + 'px',
height: h + 'px'
};
},