/cropit

A "customizable crop and zoom" jQuery plugin.

Primary LanguageJavaScriptMIT LicenseMIT

cropit

CDNJS jsDelivr Hits

Customizable crop and zoom.

See demos and docs here.

Built on top of Yufei Liu's Image Editor.

Installation

# Install cropit with bower
$ bower install cropit

# or with npm
$ npm install cropit

Migrating to v0.5

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.

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