截图框默认截满图片

[Reeyc]

demo链接我设置了 【自动生成截图框的宽高，宽高都为：3000】，然后勾选【截图框是否限制在图片里，为 true】

此时上传的图片，无论多大多小，截图框默认都可以截满整个图片，效果如下：

但是唯有一张图只截满了高度，不截满宽度，能帮忙看下吗

这是图片

[xyxiao001]

比例问题，不可能刚好全部图片都刚刚好的

[Reeyc]

@xyxiao001 可是我已设置autoCropWidth autoCropHeight，这就相当于 autoCropWidth 没生效吗

[showlotus]

我也遇到这个问题了，是组件内部的 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();
  },
};

[Reeyc]

太强了，感谢大佬 @OlderK

[luoyulingi]

我也遇到这个问题了，是组件内部的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();
  },
};

大哥牛逼，暂时用你这个修复了

[xyxiao001]

这个issue重新打开 我去看看

[luoyulingi]

这个issue重新打开 我去看看

大佬，最近在用你的组件开发，现在就是没有全圈住的属性，我就把默认截图框的大小设置为了3000的3000，确实能全圈住，但是部分图片还是不能全圈住，忘大佬修复下。 这个qq图片全选不了，snipaste的可以全选

[xyxiao001]

你是指希望截图框直接全圈住图片这个功能吧

[luoyulingi]

你是指希望截图框直接全圈住图片这个功能吧

对的，初始就是圈住全部而不是80%，目前给autoCropWidth和autoCropHeight设置为3000，也能实现类似的效果，但是部分图片不行