Issues with setData on certain images/crops

[RobertDM]

Using Cropper v3.0.0-alpha.1 Testing on Windows 10 with IE and Chrome both latest versions

What I am trying to do is probably the simplest application of cropper - I just want to obtain crop coordinates for a 1:1 thumbnail portion of an image, and do all the processing server side.

What I need to do is to set up an initial thumbnail crop area when the page loads (this area is from a face detection algo on the server). So in the Ready function of the Cropper, I'm performing a setData operation. I determined that I needed autoCrop to be enabled in order to pre-set a crop boundary.

It has been problematic. For certain images (but not all), if I set the x, y, width, height in a setData call, what happens is that the current x, y remain where the autoCrop set them, and the width and height are changed. It seems that setData has a problem with certain combinations of image/crop positions/dimensions.

After much testing I determined that a workaround was to always set the width and height first as one setData call, and then set the x, y, in a separate setData call afterwards.

Here is a paste of the Cropper setup:

$('#photo').cropper({
  viewMode: 0,
  checkCrossOrigin: false,
  preview: '#thumbPreview',
  aspectRatio: 1,
  dragMode: 'none',
  background: false,
  guides: false,
  center: false,
  checkOrientation: false,
  minContainerWidth: 130,
  rotatable: false,
  scalable: false,
  autoCrop: true,
  movable: false,
  zoomable: false,
  toggleDragModeOnDblclick: false,
  minCropBoxWidth: minThumbPx,
  minCropBoxHeight: minThumbPx,

  ready: function(){
      // Set initial thumbnail boundaries

    // This would fail
    //var defaultCrop = { "x":355, "y":0, "width":(501-355)-1, "height":(501-355)-1};  
    //$('#photo').cropper('setData',defaultCrop);        

    // Width/height must be set prior to position , or else Cropper may get confused.
    $('#photo').cropper('setData',{"width":(501-355)-1, "height":(501-355)-1});       
    $('#photo').cropper('setData', { "x":355, "y":0});      
  }
});

Anyway there would appear to be an issue with the way that setData is processing the parameters, or the order it is doing it.

It would also be nice in general for setData or setCropBoxData to set a cropping region even when Cropper is in a Cleared state with no crop region active (not sure if this is a limitation of the way it needs to function?).

[fengyuanchen]

Try to round data values first:

$().cropper('setData', {
  x: Math.round(data.x),
  y: Math.round(data.y),
  width: Math.round(data.width),
  height: Math.round(data.height),
});

[aklimaruhina]

if i need to take input value as width and height how can i arrange them inside cropper method?this does not work var width = $('#width').val(); var height = $('#height').val(); $(this).cropper('setCropBoxData', {width: width, height: height});

[fengyuanchen]

@ruhinacse14 If the width/height is the same as the current crop box's width/height, then them will be ignored.