Jquery Image Area Select Plugin

I am gonna show you how to select some area of an image.




Download | Demo

Sometimes developers need to take some part of image. Especially, it is needed when users wanna crop the images. At this point, you can use imgAreaSelect. imgAreaSelect is a jQuery plugin for selecting a area of an image.

First of all, you need to add the JS and CSS files.

[html]
<link rel="stylesheet" type="text/css" href="css/imgareaselect-default.css" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script type="text/javascript" src="scripts/jquery.imgareaselect.pack.js"></script>
[/html]

This is html part.

[html]
<img src="http://jotform.org/demo/jquery-image-area-select-plugin/images/sweet-dogs.jpg" id="ladybug_ant">
[/html]

and this is JavaScript part. As you see, in onSelectEnd a function runs. This function have 2 arguments which are img, selection. img is the url of image and selection is the coordination of selected area.

[js]
$(document).ready(function () {
$(‘#ladybug_ant’).imgAreaSelect({
handles: true,
onSelectEnd: function(img, selection){
if (!selection.width || !selection.height){
return;
}
$(‘#x1’).val(selection.x1);
$(‘#y1’).val(selection.y1);
$(‘#x2’).val(selection.x2);
$(‘#y2’).val(selection.y2);
$(‘#w’).val(selection.width);
$(‘#h’).val(selection.height);
}
});
});
[/js]

You can find detailed documentation