Pure JavaScript Image Crop Component

A pure javascript, no-framework JavaScript component for image area select and cropping.

Get it now on Binpress!

Basic example

Click and drag anywhere on the image below to begin:

You have access to the crop coordinates in real time via a callback function:

new Cropper(image, { update: function (coordinates) { // your code here! } });

Forced aspect ratio example

This example uses a constant 16:9 aspect ratio. Click and drag to begin:

It'a as simple as this:

new Cropper(image, { ratio: { width: 16, height: 9 } });

Minimum dimensions example

This example uses a minimum 400x200px crop size. Click to begin:

Just instantiate the Cropper with the min_width and min_height parameters:

new Cropper(image, { min_width: 400, min_height: 200 });

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}
Get it now on Binpress!