ezcrop v0.0.3

ezcrop

Javascript image crop tool with zooming and rotating.

Ezcrop is a Vanilla JavaScript version of jQuery Cropit plugin by Scott Cheng.

Features

• Selecting images from filesystem
• Zooming
• Moving
• Rotating
• Cropping
• Export to data URI

Installation

# Install ezcrop with bower
$ bower install ezcrop

# or with npm
$ npm install ezcrop

Usage

Add ezcrop.js to the page.

<script src="dist/ezcrop.js"></script>

And the required bit of HTML:

<div id="image-cropper">
    <div class="ezcrop-preview"></div>
    <input type="file" class="ezcrop-image-input">
    <div class="image-size-label">
      Resize image
    </div>
    <input type="range" class="ezcrop-image-zoom-input">
    <button id="rotate-ccw" class="rotate-ccw">Rotate counterclockwise</button>
    <button id="rotate-cw" class="rotate-cw">Rotate clockwise</button>

    <button id="export" class="export">Export</button>
</div>

Initialize

<script>
  (function() {
    var cropper = new ezcrop(document.getElementById('image-cropper'), {
      imageState: {
        src: 'images/hands.jpg', // start with a default image
      },
    });

    document.getElementById('rotate-ccw').addEventListener('click', function() {
      cropper.rotateCCW();
    });

    document.getElementById('rotate-cw').addEventListener('click', function() {
      cropper.rotateCW();
    });

    document.getElementById('export').addEventListener('click', function() {
      var imageData = cropper.getCroppedImageData();
      window.open(imageData);
    });
  })();
</script>

Options

Following options are supported:

Callbacks

Following callbacks can be used to interact with ezcrop.

Development

• Build: webpack
  • Watch for changes and rebuild: webpack -w
• Test: npm test
  • Test specific file: jest <filename>
• Lint: npm run jshint -s

License

MIT