jQuery Plugin for Image Cropping Functionality - imgAreaSelect

imgAreaSelect is a highly customizable and lightweight jQuery plugin for selecting a rectangular area of an image that allows you to easily apply image cropping functionality to your website or project. It supports keyboard moving and resizing.

Basic Usage:

1. Include the latest jquery library and jquery.imgareaselect.dev.js in your web page

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="jquery.imgareaselect.dev.js"></script>

2. Include imgAreaSelect CSS

<link rel="stylesheet" type="text/css" href="css/imgareaselect-default.css" />

<!-- <link rel="stylesheet" type="text/css" href="css/imgareaselect-animated.css" /> -->
<!-- <link rel="stylesheet" type="text/css" href="css/imgareaselect-deprecated.css" /> -->

3. Markup

<img id="DEMO" src="demo.jpg" />

4. Call the plugin

<script type="text/javascript">
$(document).ready(function () {
    $('img#demo').imgAreaSelect({
        handles: true,
        onSelectEnd: someFunction
    });
});
</script>

More Examples:

• Basic Example
• Callback Functions
• Advanced Usage

---

This awesome jQuery plugin is developed by odyniec. For more Advanced Usages, please check the demo page or visit the official website.