I'm using cropper, it's a jquery plugin I found at cropper web site.
I have an image size full hd 1920w on 1080h, and I need to give the user ability to crop in fixed box size 675*1080, my question is how do I set the options of this plugin ?
I've tried to do the follow with no success:

var c1 = $('.cropper-example-1 img').cropper({
            //aspectRatio: 10 / 16,
            strict: true,
            background:false,
            guides: false,
            highlight: false,
            dragCrop: false,
            movable: false,
            resizable: false,
            mouseWheelZoom: false,
            touchDragZomm:false,
            built: function () {
                //alert(1);
               // $(this).cropper('setData', 0, 0, 675, 1080,90);
               // $(this).cropper('setCropBoxData', 0, 0, 1920, 1080);
            }
        });

I'm using cropper, it's a jquery plugin I found at cropper web site.
I have an image size full hd 1920w on 1080h, and I need to give the user ability to crop in fixed box size 675*1080, my question is how do I set the options of this plugin ?
I've tried to do the follow with no success:

var c1 = $('.cropper-example-1 img').cropper({
            //aspectRatio: 10 / 16,
            strict: true,
            background:false,
            guides: false,
            highlight: false,
            dragCrop: false,
            movable: false,
            resizable: false,
            mouseWheelZoom: false,
            touchDragZomm:false,
            built: function () {
                //alert(1);
               // $(this).cropper('setData', 0, 0, 675, 1080,90);
               // $(this).cropper('setCropBoxData', 0, 0, 1920, 1080);
            }
        });

• javascript
• jquery

6 Answers 6

After soo many trials this worked for me... i needed to set the initial width and height to 240px by 607px and this is my code.

       var cropper;
       var imgx;

        $(function(){
            var imgx = $('#cpdiv').find('img');
            cropper = new Cropper(imgx[0], {                    
                //aspectRatio: 1/2,
                autoCropArea: 0,
                strict: false,
                guides: false,
                highlight: true,
                dragCrop: false,
               //cropBoxMovable: false,
                cropBoxResizable: false,

                data:{
                    width: 240,
                    height:  607,
                },

                crop(event) {
                    console.log(event.detail.width);
                    console.log(event.detail.height);
                },

            });

     });

i tried using the setCropBoxData({}) function which didnt work.. but this approach worked for me.

Try like this add autoCropArea: 0.5, and changes the built method

var $image=$('.cropper-example-1 img');

$image.cropper({
            //aspectRatio: 10 / 16,
            strict: true,
            background:false,
            guides: false,
            highlight: false,
            dragCrop: false,
            movable: false,
            resizable: false,
            mouseWheelZoom: false,
            touchDragZomm:false,
             autoCropArea: 0.5,
            built: function () {
                //alert(1);
               // $(this).cropper('setData', 0, 0, 675, 1080,90);
               // $(this).cropper('setCropBoxData', 0, 0, 1920, 1080);
                $image.cropper('setCanvasData', 0, 0, 1920, 1080));
                $image.cropper('setCropBoxData', 0, 0, 675, 1080);

            }
        });

built: function () {

//$image.cropper('setCropBoxData', 0, 0, 675, 1080);

$image.cropper("setCropBoxData", { width: 160, height: 80 });
or
$image.cropper("setCropBoxData", { left: 0, top: 0, width: 160, height: 80 });

}

If you want to make CropBox selection fit to Canvas use this autoCropArea: 1,

To make CropBox selection has margin 50% from the Canvas autoCropArea: 0.5,

try to limit its height and width on cropper.js.. not the best option but it fixed my problem. When user try to minimize the cropbox, it will stop at the set size creating a not so bad solution for now..:')

minCropBoxWidth: 350, minCropBoxHeight: 350

Working code to set crop box. I am using jQuery Cropper v1.0.0

  var $image = $(".image-crop > img");
  var init_data = { x: parseFloat($("#event_crop_x").val()), y: parseFloat($("#event_crop_y").val()), width: parseFloat($("#event_crop_w").val()), height: parseFloat($("#event_crop_h").val()) };

  $($image).cropper({
      zoomable: false,
      aspectRatio: 2 / 1,
      preview: ".img-preview",
      crop: function(event) {
        $("#event_crop_x").val(event.detail.x);
        $("#event_crop_y").val(event.detail.y);
        $("#event_crop_w").val(event.detail.width);
        $("#event_crop_h").val(event.detail.height);
       },
      data: init_data
  });