Cropper v1.0.0

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,
  cropBoxMovable: false,
  cropBoxResizable: false
});

Demo:

Launch the 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'),
    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');
});

Demo:

HTML:

<button class="btn btn-primary" id="replace-toggle" type="button">Toggle</button>

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

CSS:

.cropper-example-3 {
  width: 100%;
}

.cropper-example-3 > img {
  max-width: 100%;
}

JavaScript:

var $image = $('.cropper-example-3 > img'),
    replaced;

$image.cropper({
  movable: false,
  zoomable: false,
  rotatable: false,
  scalable: false
});

$('#replace-toggle').click(function () {
  var url = 'img/picture-2.jpg';

  if (replaced) {
    url = 'img/picture.jpg';
  }

  $image.cropper('replace', url);
  replaced = !replaced;
});