šŸ”” Alert..!! Get 2 Month Free Cloud Hosting With $200 Bonus From Digital Ocean ACTIVATE DEAL

A jQuery plugin for image cropping and zooming.Loads images locally via FileReader, and does cropping using canvas.Designed to be extremely customizable via CSS.Best for the cases where you want users to upload images of a specific size and ratio.

HTML5 Plugins Zoom

Documentation

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 May Also Like