vue-cropper icon indicating copy to clipboard operation
vue-cropper copied to clipboard

截图框默认截满图片

Open Reeyc opened this issue 2 years ago • 9 comments

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

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

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

这是图片 组网连接方式

Reeyc avatar Aug 22 '22 08:08 Reeyc

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

xyxiao001 avatar Aug 23 '22 02:08 xyxiao001

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

Reeyc avatar Aug 23 '22 07:08 Reeyc

我也遇到这个问题了,是组件内部的 changeCrop 方法里面关于两个浮点数之间的比较,有点问题@xyxiao001 。我加了一个判断:

image

在组件创建完实例阶段,把组件 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();
  },
};

showlotus avatar Sep 27 '22 02:09 showlotus

太强了,感谢大佬 @OlderK

Reeyc avatar Sep 30 '22 07:09 Reeyc