Image Cropper

• Introduction
• Basic Example
• Real World Example

Crop Image to x: 45, y: 5, width: 390, height: 125

<button id="cropLink" class="btn btn-primary">Crop Image to x: 45, y: 5, width: 390, height: 125</button>

<div class="layout image-cropper">
  <div class="column w50">
    <div class="column-content">
      <img id="image" src="https://alloyui.com/image-cropper/img/crop-image.jpg" />
    </div>
  </div>
  <div id="cropped-view" class="column w50">
    <div class="column-content cropped-output">
      <div class="cropped-image helper-hidden" id="croppedImage"></div>
      <div class="status helper-hidden" id="status"></div>
    </div>
  </div>
</div>

YUI().use(
  'aui-image-cropper',
  function(Y) {
    var imageCropper = new Y.ImageCropper(
      {
        srcNode: '#image',
        x: 100,
        y: 100
      }
    ).render();

    var statusTPL = '<strong class="x">x: {x}</strong><strong class="y">y: {y}</strong><strong class="height">height: {height}</strong><strong class="width">width: {width}</strong>';

    var updateImage = function() {
      var cropRegion = imageCropper.get('region');

      croppedImage.setStyles(
        {
          'backgroundPosition': (-cropRegion.x) + 'px ' + (-cropRegion.y) + 'px',
          height: cropRegion.height,
          width: cropRegion.width
        }
      );

      croppedImage.html(Y.Lang.sub(statusTPL, cropRegion));
    };

    imageCropper.after(
      'crop',
      function(event) {
        updateImage();
      }
    );

    var croppedImage = Y.one('#croppedImage');

    var croppedStatus = Y.one('#croppedStatus');

    croppedImage.show();

    updateImage();

    Y.one('#cropLink').on(
      'click',
      function (event) {
        imageCropper.setAttrs(
          {
            cropHeight: 125,
            cropWidth: 390,
            x: 45,
            y: 5
          }
        );
      }
    );
  }
);