- Notifications
You must be signed in to change notification settings - Fork1.7k
License
fengyuanchen/cropper
Folders and files
| Name | Name | Last commit message | Last commit date | |
|---|---|---|---|---|
Repository files navigation
A simple jQuery image cropping plugin. As of v4.0.0, the core code of Cropper is replaced withCropper.js.
- Demo
- Cropper.js - JavaScript image cropper (recommended)
- jquery-cropper - A jQuery plugin wrapper for Cropper.js (recommended for jQuery users to use this instead of Cropper)
dist/├── cropper.css├── cropper.min.css (compressed)├── cropper.js (UMD)├── cropper.min.js (UMD, compressed)├── cropper.common.js (CommonJS, default)└── cropper.esm.js (ES Module)npm install cropper jquery
Include files:
<scriptsrc="/path/to/jquery.js"></script><!-- jQuery is required --><linkhref="/path/to/cropper.css"rel="stylesheet"><scriptsrc="/path/to/cropper.js"></script>
Initialize with$.fn.cropper method.
<!-- Wrap the image or canvas element with a block element (container) --><div><imgid="image"src="picture.jpg"></div>
/* Limit image width to avoid overflow the container */img {max-width:100%;/* This rule is very important, please do not ignore this! */}
var$image=$('#image');$image.cropper({aspectRatio:16/9,crop:function(event){console.log(event.detail.x);console.log(event.detail.y);console.log(event.detail.width);console.log(event.detail.height);console.log(event.detail.rotate);console.log(event.detail.scaleX);console.log(event.detail.scaleY);}});// Get the Cropper.js instance after initializedvarcropper=$image.data('cropper');
See the availableoptions of Cropper.js.
$('img').cropper(options);
See the availablemethods of Cropper.js.
$('img').once('ready',function(){$(this).cropper('method',argument1,,argument2, ...,argumentN);});
See the availableevents of Cropper.js.
$('img').on('event',handler);
If you have to use other plugin with the same namespace, just call the$.fn.cropper.noConflict method to revert to it.
<scriptsrc="other-plugin.js"></script><scriptsrc="cropper.js"></script><script>$.fn.cropper.noConflict();// Code that uses other plugin's "$('img').cropper" can follow here.</script>
It is the same as thebrowser support of Cropper.js. As a jQuery plugin, you also need to see thejQuery Browser Support.
Please read through ourcontributing guidelines.
Maintained under theSemantic Versioning guidelines.