cannot set minimum bounds of crop box size?

[EliasZ]

Apparently minCropBoxWidth and minCropBoxHeight are relative to the page, not the image.

So right now there is no way to set a minimum size for the to-be cropped image.

Checked old issues and has been requested plenty of times, for example:
#339
#31

[fengyuanchen]

You can limit it in the cropmove event with e.preventDefault().

[rsnitsch]

I do not know how we're supposed to implement this with cropmove. But I managed to achieve the same result using the crop event:

    var lastValidCrop = null;
    var cropper = new Cropper(image, {
        viewMode: 1,
        crop: function (e) {
            console.log(e);

            var validCrop = true;
            if (e.detail.width < 300) validCrop = false;
            if (e.detail.height < 300) validCrop = false;

            if (validCrop) {
                lastValidCrop = cropper.getData();
                $("#crop_photo_x").val(e.detail.x);
                $("#crop_photo_y").val(e.detail.y);
                $("#crop_photo_width").val(e.detail.width);
                $("#crop_photo_height").val(e.detail.height);
            } else {
                cropper.setData(lastValidCrop);
            }
        }
    });

Beware that the automatic crop area initialization should yield a crop area that satisfies the validCrop condition. Otherwise, the lastValidCrop variable will not be initialized. You can probably enforce this by setting the initial crop area on your own, instead of relying on autoCropArea.

Please note: This is not an exact size restriction. During my tests I was not able to make the cropbox smaller than 301.3341. But for most purposes it should be sufficient.

[Programie]

I've the same issue and got it to work with the cropmove event:

var cropper = new Cropper(image, {
    cropmove: function(event) {
        var data = cropper.getData();

        if (data.width < 200) {
            event.preventDefault();

            data.width = 200;

            cropper.setData(data);
        }

        if (data.height < 200) {
            event.preventDefault();

            data.height = 200;

            cropper.setData(data);
        }
    }
});

This ensures that the selection is not smaller than 200 x 200 pixels.

[sadikyalcin]

Bumping old thread but this is potentially a better solution;

1. Calculate the image size (either width or height).
2. Get the container size of the cropper.
3. Divide image size by container size to get the scale ratio.
4. Divide the minCropBoxWidth and minCropBoxHeight by the scale ratio.

const minCropBoxWidth = 100;
const minCropBoxHeight = 100;

const cropperHeight = 500;
const scaleRatio = 1920 / cropperHeight; // 1920 image width

//

<Cropper
    style={{
        height: cropperHeight,
        width: '100%',
    }}
    ...
    minCropBoxWidth={minCropBoxWidth / scaleRatio}
    minCropBoxHeight={minCropBoxHeight / scaleRatio}
/>

[mysuf]

@fengyuanchen Honestly it doesn't make much sense to override cropmove when you can provide only minWidth/minHeight/aspectRatio - then cropperjs have enough information to adjust cropbox size dynamically.

Lets say, you have image 600x600 and you won't produce image smaller than 200px (wide or high) so you set { minWidth: 200, minHeight: 200, aspectRatio: 1.5, ...}

Then cropperjs should evaluate:

heightRatio = 1.0 / options.aspectRatio;
naturalMinWidth = options.aspectRatio > 1 ? options.minWidth * options.aspectRatio : options.minWidth; // 300px
naturalMinHeight = heightRatio > 1 ? options.minHeight * heightRatio : options.minHeight; // 200px

And other values like minCropBoxWidth/minCropBoxHeight/etc on init/zoom/containerResize can be easily computed.

[sadikyalcin]

@fengyuanchen Honestly it doesn't make much sense to override cropmove when you can provide only minWidth/minHeight/aspectRatio - then cropperjs have enough information to adjust cropbox size dynamically.

Lets say, you have image 600x600 and you won't produce image smaller than 200px (wide or high) so you set { minWidth: 200, minHeight: 200, aspectRatio: 1.5, ...}

Then cropperjs should evaluate:

heightRatio = 1.0 / options.aspectRatio;
naturalMinWidth = options.aspectRatio > 1 ? options.minWidth * options.aspectRatio : options.minWidth; // 300px
naturalMinHeight = heightRatio > 1 ? options.minHeight * heightRatio : options.minHeight; // 200px

And other values like minCropBoxWidth/minCropBoxHeight/etc on init/zoom/containerResize can be easily computed.

As shocking as it sounds, I've tried like 10 different cropping libraries, none of them seem to consider this basic - normal situation.