A "customizable crop and zoom"
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
版权声明:
1、该文章(资料)来源于互联网公开信息,我方只是对该内容做点评,所分享的下载地址为原作者公开地址。2、网站不提供资料下载,如需下载请到原作者页面进行下载。