Skip to content

scottcheng/cropit

master
Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?
Code

Latest commit

 

Git stats

Files

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

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