Skip to content
master
Go to file
Code

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
src
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

README.md

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

You can’t perform that action at this time.