Cropper

X px

Y px

Width px

Height px

Rotate deg

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

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

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>

JavaScript:

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

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

Cropper v0.9.3

HTML:

Javascript:

Examples

Cropper with fixed crop box.

Demo:

HTML:

JavaScript:

Cropper in a Bootstrap modal

Crop avatar A complete example