# Cropper v0.11.1

A simple jQuery image cropping plugin.

X px
Y px
Width px
Height px
Rotate deg
ScaleX
ScaleY

#### 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(e) {
        $("#dataX").val(Math.round(e.x));
        $("#dataY").val(Math.round(e.y));
        $("#dataHeight").val(Math.round(e.height));
        $("#dataWidth").val(Math.round(e.width));
        $("#dataRotate").val(e.rotate);
        $("#dataScaleX").val(e.scaleX);
        $("#dataScaleY").val(e.scaleY);
      }
    });

## 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,
      cropBoxMovable: false,
      cropBoxResizable: 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'),
        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 with responsive container.

##### 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();

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

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

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

### 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