Demo

---

HTML:

<img class="cropper" src="img/picture.jpg">

Javascript:

var $cropper = $(".cropper"),
    $dataX1 = $("#dataX1"),
    $dataY1 = $("#dataY1"),
    $dataX2 = $("#dataX2"),
    $dataY2 = $("#dataY2"),
    $dataHeight = $("#dataHeight"),
    $dataWidth = $("#dataWidth"),
    cropper;

$cropper.cropper({
    aspectRatio: 16 / 9,
    preview: ".extra-preview",
    done: function(data) {
        $dataX1.val(data.x1);
        $dataY1.val(data.y1);
        $dataX2.val(data.x2);
        $dataY2.val(data.y2);
        $dataHeight.val(data.height);
        $dataWidth.val(data.width);
    }
});

cropper = $cropper.data("cropper");

$("#enable").click(function() {
    $cropper.cropper("enable");
});

$("#disable").click(function() {
    cropper.disable();
});

Getting started

Installation

Include files:

<script src="/path/to/jquery.js"></script><!-- jQuery is required -->
<link rel="stylesheet" href="/path/to/cropper.css">
<script src="/path/to/cropper.js"></script>

Usage

Initialize with $.fn.cropper method.

HTML:

<img class="cropper" src="img/picture.jpg">

Javascript:

$(".cropper").cropper({
    aspectRatio: 2,
    done: function(data) {
        console.log(data);
    }
});

Configure

Setup

Setup with $("#target").cropper(options), or global setup with $.fn.cropper.setDefaults(options).

Options

Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-, as in data-aspect-ratio="2".

Name	Type	Default	Description
aspectRatio	number	1	The aspect ratio of the cropping zone. (e.g., "2", "1.5", "1.3333333333333333", etc.)
done	function	function(data) {}	The function will be passed a object data and run when the cropping zone was moving.
modal	boolean	true	Show (true) or hide (false) the black modal layer.
preview	string	""	A jQuery selector string, add extra elements to show preview.

Methods

Methods

• enable - Enable the cropper
• disable - Disable the cropper

Usage

JavaScript:

// Methods
var $cropper = $("#cropper-methods"),
    $enable = $("#cropper-enable"),
    $disable = $("#cropper-disable"),
    cropper;

// Initialize
$cropper.cropper();

// Get the instance
cropper = $cropper.data("cropper");

// Enable
$enable.click(function() {
    $cropper.cropper("enable");
});

// Disable
$disable.click(function() {
    cropper.disable();
});