想知道能否支持修改裁剪框的坐标，实现根据上传图片，裁剪框自适应吸附在图片

[Ercyao]

[xyxiao001]

可以修改 但是你说的吸附是什么意思，

[debbygigigi]

他應該是指裁切框的長寬能貼齊圖片的長或寬 例如圖片為400x800，裁切框為400x300， 裁切框的寬會等於圖片的框

[xyxiao001]

木有这个

[hanfeng1982]

确认想要这个功能。不然每次拖动裁切框挺麻烦的。

[xyxiao001]

那你可以开启centerbox这个属性的

[hanfeng1982]

那你可以开启centerbox这个属性的

亲，这个也不能自动设置裁剪框的大小呀。我现在每次获得图片本身的高和宽，来动态计算框的大小，现在已经实现了裁剪框自动吸附功能。 先做了高度太高的自动调整裁剪框，代码如下，请看看有问题不？谢谢。

var reader = new FileReader() reader.onload = (e) => { let data if (typeof e.target.result === 'object') { // 把Array Buffer转化为blob 如果是base64不需要 data = window.URL.createObjectURL(new Blob([e.target.result])) console.log(data)

        //加载图片获取图片真实宽度和高度
        var image = new Image();
        image.onload=function(){
          var width = image.width;
          var height = image.height;
          //裁剪框所在div的高度是360
          if (height > 360){
            me.option.autoCropHeight=360
            me.option.autoCropWidth = 360/height*width
            console.log(height+":"+me.option.autoCropWidth)
          }else{
            me.option.autoCropHeight=height
            me.option.autoCropWidth = width
          }
          console.log(width+'======'+height+"=====");
        };
        image.src= data;
        console.log(image.width)

      } else {
        data = e.target.result
      }

      this.option.img = data

    }
    // 转化为base64
    // reader.readAsDataURL(file)
    // 转化为blob
    reader.readAsArrayBuffer(file)

[yuehaocc]

个人觉得这个功能很实用，体验很好

[jxfsuda]

可以修改 但是你说的吸附是什么意思，

我的图片很高, 有个需要裁切的,在最下面. 所以要拖很久到最底下. 给一个设置图片初始位置的方法回调. 参数是当前 图片宽高, 返回一个x,y 给你,没有就给个默认值

你觉得如何. 我正好用这个,我估计提问的兄弟也是要这个?

[cuteCloud]

个人觉得这个功能很实用，体验很好

我觉得更严谨的可以先判断图片的宽高比例 然后再根据比例决定是根据高还是根据宽计算自适应 同时配合mode=contain 可以实现

[Selenium39]

我有个差不多的需求，急需解决。 比如在裁剪图片的时候，我图片只有397x599的话，但实际可供裁剪的范围是1171x599,希望做到可供裁剪的范围即为图片的范围。

[1030907690]

这个计算可以

[1030907690]

那你可以开启centerbox这个属性的

亲，这个也不能自动设置裁剪框的大小呀。我现在每次获得图片本身的高和宽，来动态计算框的大小，现在已经实现了裁剪框自动吸附功能。 先做了高度太高的自动调整裁剪框，代码如下，请看看有问题不？谢谢。

var reader = new FileReader() reader.onload = (e) => { let data if (typeof e.target.result === 'object') { // 把Array Buffer转化为blob 如果是base64不需要 data = window.URL.createObjectURL(new Blob([e.target.result])) console.log(data)

        //加载图片获取图片真实宽度和高度
        var image = new Image();
        image.onload=function(){
          var width = image.width;
          var height = image.height;
          //裁剪框所在div的高度是360
          if (height > 360){
            me.option.autoCropHeight=360
            me.option.autoCropWidth = 360/height*width
            console.log(height+":"+me.option.autoCropWidth)
          }else{
            me.option.autoCropHeight=height
            me.option.autoCropWidth = width
          }
          console.log(width+'======'+height+"=====");
        };
        image.src= data;
        console.log(image.width)

      } else {
        data = e.target.result
      }

      this.option.img = data

    }
    // 转化为base64
    // reader.readAsDataURL(file)
    // 转化为blob
    reader.readAsArrayBuffer(file)

这个可行，厉害

[1030907690]

那你可以开启centerbox这个属性的

亲，这个也不能自动设置裁剪框的大小呀。我现在每次获得图片本身的高和宽，来动态计算框的大小，现在已经实现了裁剪框自动吸附功能。 先做了高度太高的自动调整裁剪框，代码如下，请看看有问题不？谢谢。

var reader = new FileReader() reader.onload = (e) => { let data if (typeof e.target.result === 'object') { // 把Array Buffer转化为blob 如果是base64不需要 data = window.URL.createObjectURL(new Blob([e.target.result])) console.log(data)

        //加载图片获取图片真实宽度和高度
        var image = new Image();
        image.onload=function(){
          var width = image.width;
          var height = image.height;
          //裁剪框所在div的高度是360
          if (height > 360){
            me.option.autoCropHeight=360
            me.option.autoCropWidth = 360/height*width
            console.log(height+":"+me.option.autoCropWidth)
          }else{
            me.option.autoCropHeight=height
            me.option.autoCropWidth = width
          }
          console.log(width+'======'+height+"=====");
        };
        image.src= data;
        console.log(image.width)

      } else {
        data = e.target.result
      }

      this.option.img = data

    }
    // 转化为base64
    // reader.readAsDataURL(file)
    // 转化为blob
    reader.readAsArrayBuffer(file)

全部代码，裁剪框所在div的高度是，注意修改成自己的

 let vm = this;
      var reader = new FileReader();
      reader.readAsDataURL(file.raw);
      reader.onload = (e) => {
          // 把Array Buffer转化为blob 如果是base64不需要
          let data = reader.result;
          console.log(data);
          //加载图片获取图片真实宽度和高度
          var image = new Image();
          image.onload = function () {
            var width = image.width;
            var height = image.height;
            console.log(width + "======" + height + "=====" + vm.option.autoCropHeight);

            //裁剪框所在div的高度是600，注意修改成自己的
            if (height > 600) {
              vm.option.autoCropHeight = 600;
              vm.option.autoCropWidth = (600 / height) * width;
              console.log(height + ":" + vm.option.autoCropWidth);
            } else {
              vm.option.autoCropHeight = height;
              vm.option.autoCropWidth = width;
            }
          };
          image.src = data;
          console.log(image.width);

        this.option.img = data;
      };