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.

<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>

This is html part.

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

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.

$(document).ready(function () {
handles: true,
onSelectEnd: function(img, selection){
if (!selection.width || !selection.height){

You can find detailed documentation