Search code examples
javascripthtmljquerycropperjs

How to set maximum cropbox size in cropperjs?

Hello i just want to ask how can i set the maximum size of my cropbox? Because i got a image frame which have a 400x400 image size then inside of it is a box container which going to be the place where the cropped image from the cropbox go.

I have this jQuery code

var img = $('#image');
$('#image').on('load', function () {
  img.cropper({
    aspectRatio         : 1,
    scalable            : true,
    rotatable           : true,
    checkOrientation    : true,
    cropBoxResizable    : true,
    dragMode            : 'move',
    minCropBoxWidth     : 346,
    minCropBoxHeight    : 269,
    minContainerHeight  : 400,
    minContainerWidth   : 400,
    minCanvasWidth      : 400,
    minCanvasHeight     : 400,
    viewMode            : 1
  });
  img.cropper("setCropBoxData", { width: "346", height: "269" });
}

It works normal but no changes have been made with my cropbox. It only set its minimum size but not the maximum. Any solutions will help thanks.

Solution

  • You can add this:

    autoCropArea: 1,

    Description:

    • Default: 0.8 (80% of the image)
    • It should be a number between 0 and 1.
    • Define the automatic cropping area size (percentage).

    Source: https://github.com/fengyuanchen/cropperjs/blob/main/README.md#options