Customizable crop and zoom.

See demos and docs here.

Built on top of Yufei Liu's Image Editor.

# Install cropit with bower $ bower install cropit # or with npm $ npm install cropit

v0.5 introduced rotation feature and improved performance, as well as a breaking changes in markup structure and class names.

Markup in v0.4:

<div class="image-editor"> <!-- .cropit-image-preview-container is needed for background image to work --> <div class="cropit-image-preview-container"> <div class="cropit-image-preview"></div> </div> <!-- Other stuff --> </div>

New markup in v0.5:

<div class="image-editor"> <div class="cropit-preview"></div> <!-- Other stuff --> </div>

Note that .cropit-image-preview-container element is no longer needed, and all you need is a .cropit-preview (previously .cropit-image-preview) whether or not you want image background that goes beyond the preview area. New markup structure (after cropit is initialized) is as follows:

.cropit-preview .cropit-preview-background-container img.cropit-preview-background .cropit-preview-image-container img.cropit-preview-image

Note the class name changes:

.cropit-image-preview => .cropit-preview .cropit-image-background-container => .cropit-preview-background-container .cropit-image-background => .cropit-preview-background 

Make sure to update class names in your selectors.

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

MIT