Cropper: Add maxCropBoxWidth & maxCropBoxHeight

[wworley]

Do you plan to add the ability to set the max crop box width and height similar to how you set the min using minCropBoxWidth & minCropBoxHeight or at least a way to set a fixed size in pixels?

I'm trying to use cropper for a pictures project where the user creates a 100px X 100px (always fixed to this size no larger and no smaller) thumbnail from a larger image.

[saiqulhaq]

maybe you can try with set the aspectRatio option to 1:1, then you can resize the image to 100px X 100px on the backend/php/rails

[wworley]

i actually already had the 1:1 but wanted the user not to be able to resize the crop area, my finaly solution is below which works perfectly thanks to the built option.

$('.photoCrop > img').cropper({
    aspectRatio: 1 / 1,
    preview: ".thumbnailPhoto",
    minCropBoxWidth: 100,
    minCropBoxHeight: 100,
    dragCrop: false,
    mouseWheelZoom: false,
    resizable: false,
    crop: function(data) {
        $("#thumbnailx").val(Math.round(data.x));
        $("#thumbnaily").val(Math.round(data.y));
        $("#thumbnailH").val(Math.round(data.height));
        $("#thumbnailW").val(Math.round(data.width));
    },
    built: function(){
        $('.photoCrop > img').cropper('setCropBoxData',{
            width: 100,
            height: 100
        });
    }
});

[saiqulhaq]

nice tricks
however the feature of maxCropBoxWidth and maxCropBoxHeight is useful too

[fengyuanchen]

It's unnecessary to add them, because the maxCropBoxWidth/Height depends on the width/height of the container.

[saiqulhaq]

Sorry, but I got this when the image is very large, the container is higher than the image, could you explain to me please?

[fengyuanchen]

You should limit the container size, e.g.:

.img-container {
  max-width: 100%;
  max-height: 360px;
}

[saiqulhaq]

okay thank you very much @fengyuanchen

[wworley]

@fengyuanchen i think you misunderstand the purpose, when you want to FORCE the size of the thumbnail and you want the thumbnail size to be no larger than say 100x100 pixels such as in my screenshot below the only way to do it is by using built and setting the setCropBoxData.

The only thing i have left to figure out is how to move the crop box to the center of the image, right now it just loads for some reason in the top left area of the photo.

ideally what would be nice, is if regardless of the cropbox size the output would be a 100x100 pixel image, this would allow more area from the original image to be captured without having to use the scale on the image.

[saiqulhaq]

@wworley: I could accomplished that by resizing the image using imagemagick, so after the user uploading his image, the image is resized by imagemagick using resize_to_fit function (I use ruby), then the resized image will displayed to the user, for example:
let say I want every image have width 640x400, then I have image with size 2560x1600 pixel, so the imagemagick will resized it to 640 width and auto high, and I can crop the image using this awesome js cropper to get the 640x400 pixel

[wworley]

@saiqulhaq right now i'm using a similar method but with php/GD and uploading to S3, the issue is using this cropper it lacks some of the features like in GD imagecopyresized(); which would grab a larger area of an image but resize it down to specified dimensions. I had found a different js cropper that handled this type of cropping but lacked many of the other features that this cropper has.

[fengyuanchen]

@wworley I suggest you just set the aspect ratio to 1:1, and resize the cropped image with other way, for example:

$('#img').cropper({
  aspectRatio: 1,
  built: function () {
    var croppedCanvas = $(this).cropper('getCroppedCanvas', {
          width: 100, // resize the cropped area
          height: 100
        });

    croppedCanvas.toDataURL(); // Get the 100 * 100 image.
  }
});

[saeedafshari8]

You can use cropBoxResizable: false

[Yasir-Shabbir]

hi can anyone please help me . i want my crop box to fit the canvas with respect to ratio if height is greater than width make crop box height 100% or if width is greater than height than width should be 100% and height will be relative to width. thanks in advance for help.

[aijuthomas]

Hi I am loading an image dynamically and after that i am initializing the plugin.

 function InitializeCrop() {
        var $image = $('#backgroundImage');

        $image.cropper({             
            strict: false,
            cropBoxMovable: true,
            cropBoxResizable: false,
            built: function () {
                $('#backgroundImage').cropper('setCropBoxData', {
                    width: 100,
                    height: 150           
                });
            }
        });
    }

But cropper is not setting to fixed height and width, rather it is having some default height and width.
minCropBoxWidth is working fine. Please help.