是否可以可供裁剪的范围即为图片的大小？急急急急!!!!

[Selenium39]

例如我的图片大小显示为401x598,可是我供裁剪的范围却有1170x598.请问一下能否使得可供裁剪的范围能正好是图片的大小，能够根据上传图片的宽高动态的变化。

[Selenium39]

我通过this.$refs.cropper.trueWidth*this.$refs.cropper.scale和this.$refs.cropper.trueHeight*this.$refs.cropper.scale可以获得图片的宽高，然后给VueCropper绑定了动态style，在动态的style中设置width和height。

我的想法是让vueCropper动态绑定style，将vueCropper宽高设置为显示图片的宽高。我尝试了下面两种解决办法，都未解决.

1.我在mounted中写死width和height为固定“401px”和“598px”，效果能够达到，但是上传的图片大小不一，我将width和height动态设置为this.$refs.cropper.trueWidth*this.$refs.cropper.scale和this.$refs.cropper.trueHeight*this.$refs.cropper.scale报错，因为this.$refs.cropper为undefined.

2.我在computed中指定绑定的style cropeStyle(){return width:this.width},然后在进入vueCropper的enter事件中指定this.width=this.$refs.cropper.trueWidth*this.$refs.cropper.scale可以指定，可供选择的裁剪范围也变为了图片的范围，但是图片在可供裁剪的范围中出现了移动。不知道为什么。

[xyxiao001]

Centerbox可以限制截图框只能在图片里面

[Selenium39]

Centerbox可以限制截图框只能在图片里面

我试过将centerbox设置为true，无效果

<vueCropper
                @mouseenter.native="enter"
                @mouseleave.native="leave"
                ref="cropper"
                img="../../../../static/1.jpg"
                :outputSize="option.size"
                :outputType="option.outputType"
                :info="true"
                :full="option.full"
                :canMove="option.canMove"
                :canMoveBox="option.canMoveBox"
                :original="option.original"
                :autoCrop="option.autoCrop"
                :autoCropWidth="option.autoCropWidth"
                :autoCropHeight="option.autoCropHeight"
                :fixed="option.fixed"
                :fixedNumber="option.fixedNumber"
                :centerBox="option.centerBox"
                :infoTrue="option.infoTrue"
                :fixedBox="option.fixedBox"
                style="background-image:none"
              ></vueCropper>

option: {
        info: true, // 裁剪框的大小信息
        outputSize: 0.8, // 裁剪生成图片的质量
        outputType: "jpeg", // 裁剪生成图片的格式
        canScale: false, // 图片是否允许滚轮缩放
        autoCrop: false, // 是否默认生成截图框
        autoCropWidth: 0,
        autoCropHeight: 0,
        fixedBox: false, // 固定截图框大小 不允许改变
        fixed: false, // 是否开启截图框宽高固定比例
        fixedNumber: [7, 5], // 截图框的宽高比例
        full: true, // 是否输出原图比例的截图
        canMove: false, //时候可以移动原图
        canMoveBox: true, // 截图框能否拖动
        original: false, // 上传图片按照原始比例渲染
        centerBox: true, // 截图框是否被限制在图片里面
        info: true // info展示截图框大小 infoTrue展示真实图片大小
      }

[xyxiao001]

http://github.xyxiao.cn/vue-cropper/example/ 看看例子
centerbox是可以的

[Selenium39]

http://github.xyxiao.cn/vue-cropper/example/ 看看例子
centerbox是可以的

原来要设置autoCrop=true，centerbox才会生效，使得限制在图片里。
但是我这样做的目的其实是想通过this.$refs.cropper.getCropAxis()拿到相对于点1的坐标，但我发现目前通过这个函数拿到的是相对于点2的坐标。请问能有办法拿到相对于点1的坐标吗？

如下图，如果基于点1的话x1坐标明显应该为0

[xyxiao001]

这个你可以通过加上截图框的宽度来得到 cropW