X px
Y px
Width px
Height px
Rotate deg

#### Cropped

#### Diagram of data's properties

16:9 4:3 1:1 2:3 Free

##### HTML:

    ...
    <div class="img-container">
      <img src="img/picture.jpg">
    </div>
    ...
    ...
    <div class="img-preview preview-lg"></div>
    <div class="img-preview preview-md"></div>
    <div class="img-preview preview-sm"></div>
    <div class="img-preview preview-xs"></div>
    ...

##### Javascript:

    $(".img-container > img").cropper({
      aspectRatio: 16 / 9,
      preview: ".img-preview",
      crop: function(data) {
        $("#dataX").val(Math.round(data.x));
        $("#dataY").val(Math.round(data.y));
        $("#dataHeight").val(Math.round(data.height));
        $("#dataWidth").val(Math.round(data.width));
        $("#dataRotate").val(Math.round(data.rotate));
      }
    });

## Examples

### Cropper with fixed crop box.

##### Demo:

##### HTML:

    <div class="cropper-example-1">
      <img src="img/picture.jpg" alt="Picture">
    </div>

##### JavaScript:

    $('.cropper-example-1 > img').cropper({
      aspectRatio: 16 / 9,
      autoCropArea: 0.65,
      strict: false,
      guides: false,
      highlight: false,
      dragCrop: false,
      movable: false,
      resizable: false
    });

### Cropper in a Bootstrap modal

Demo:

HTML:

    <div class="modal fade" id="cropper-example-2-modal">
      <div class="modal-dialog">
        <div class="modal-content">
          ...
          <div class="modal-body">
            <div id="cropper-example-2">
              <img src="img/picture.jpg" alt="Picture">
            </div>
          </div>
          ...
        </div>
      </div>
    </div>

#### Cropper

JavaScript:

    var $image = $('#cropper-example-2 > img'),
        canvasData,
        cropBoxData;

    $('#cropper-example-2-modal').on('shown.bs.modal', function () {
      $image.cropper({
        autoCropArea: 0.5,
        built: function () {
          $image.cropper('setCanvasData', canvasData);
          $image.cropper('setCropBoxData', cropBoxData);
        }
      });
    }).on('hidden.bs.modal', function () {
      canvasData = $image.cropper('getCanvasData');
      cropBoxData = $image.cropper('getCropBoxData');
      $image.cropper('destroy');
    });

### Crop avatar A complete example

This example requires a PHP server to upload and crop image. Please download and test it.

Download View the sources