How to set crop box in jquery cropper

问题:

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);             }         }); 

回答1:

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);              }         }); 

回答2:

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 });  } 

回答3:

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

回答4:

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.

文章来源: How to set crop box in jquery cropper