vue-cropper
vue-cropper copied to clipboard
截图框默认截满图片
demo链接我设置了 【自动生成截图框的宽高,宽高都为:3000】,然后勾选【截图框是否限制在图片里,为 true】
此时上传的图片,无论多大多小,截图框默认都可以截满整个图片,效果如下:
但是唯有一张图只截满了高度,不截满宽度,能帮忙看下吗
这是图片
比例问题,不可能刚好全部图片都刚刚好的
@xyxiao001 可是我已设置autoCropWidth
autoCropHeight
,这就相当于 autoCropWidth
没生效吗
我也遇到这个问题了,是组件内部的 changeCrop
方法里面关于两个浮点数之间的比较,有点问题@xyxiao001 。我加了一个判断:
在组件创建完实例阶段,把组件 methods
里的 changeCrop
换成自己的就可以了:
import { VueCropper } from "vue-cropper";
export default {
/* ... */
methods: {
/* ... */
fixVueCropperChangeCrop() {
VueCropper.methods.changeCrop = function (w, h) {
if (this.centerBox) {
// 修复初始化时候在centerBox=true情况下
let axis = this.getImgAxis();
const isEqual = (n1, n2, offset = 10e-5) => Math.abs(n1 - n2) < offset;
if (!isEqual(w, axis.x2 - axis.x1) && w > axis.x2 - axis.x1) {
// 宽度超标
w = axis.x2 - axis.x1;
h = (w / this.fixedNumber[0]) * this.fixedNumber[1];
}
if (!isEqual(h, axis.y2 - axis.y1) && h > axis.y2 - axis.y1) {
// 高度超标
h = axis.y2 - axis.y1;
w = (h / this.fixedNumber[1]) * this.fixedNumber[0];
}
}
// 判断是否大于容器
this.cropW = w;
this.cropH = h;
this.checkCropLimitSize();
this.$nextTick(() => {
// 居中走一走
this.cropOffsertX = (this.w - this.cropW) / 2;
this.cropOffsertY = (this.h - this.cropH) / 2;
if (this.centerBox) {
this.moveCrop(null, true);
}
});
};
},
},
created() {
this.fixVueCropperChangeCrop();
},
};
太强了,感谢大佬 @OlderK