Pure JavaScript Image Crop Component
A pure javascript, no-framework JavaScript component for image area select and cropping.
- Easy to use, no special markup needed (jump to instructions).
- ZERO dependencies. Doesn't need jQuery or any other framework, but plays well with them.
- Compatible with every major browser, including Internet Explorer 7!
- Configurable aspect ratio, minimum and maximum dimensions, etc.
- Small footprint (just ~8.1 KB when minified).
Basic example
Click and drag anywhere on the image below to begin:
Forced aspect ratio example
This example uses a constant 16:9 aspect ratio. Click and drag to begin:
Minimum dimensions example
This example uses a minimum 400x200px crop size. Click to begin:
Instructions
1. Include the JS and CSS files:
<script type="text/javascript" src="cropper.js"></script>
<link rel="stylesheet" href="cropper.css"></div>
2. Add your image to your HTML document. Absolutely no other HTML markup is required:
<img src="your-image.jpg" id="image" />
3. Initialize the Cropper, and you're good to go!
document.getElementById('image').onload = function () {
new Cropper(this, {
// options
});
}
Available options
| Option | Type | Description |
| update | Function |
A function the Cropper calls automatically whenever the crop coordinates are changed. It receives a single parameter, a JavaScript object with four keys: {x: 100, y: 200, width: 400, height: 200}
|
| min_width | Integer | The minimum width the user is allowed to select |
| min_height | Integer | The minimum height the user is allowed to select |
| max_width | Integer | The maximum width the user is allowed to select |
| max_height | Integer | The maximum height the user is allowed to select |
| ratio | Object |
A simple JavaScript object that represents the aspect ratio the crop area is forced to respect: {width: 16, height: 9}
|