If you want to crop image then use JQuery Crop plugin. Download JQuery Crop Plugin from Here. Here you get two file, first is jquery.JCrop.js and second one is jquery.Jcrop.css file. Both of these files are used to set the crop section area on image. Lets check the example of Jquery crop section area of image.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script src="jquery.Jcrop.js"></script>
<link href="jquery.Jcrop.css" rel="stylesheet" />
<script>
$(function () {
$("#cropimage").Jcrop({
onSelect: croparea
});
})
function croparea(c) {
$("#coordinate_x").val(c.x);
$("#coordinate_y").val(c.y);
$("#coordinate_w").val(c.w);
$("#coordinate_h").val(c.h);
};
</script>
</head>
<body>
<div>
<img src="image/12.PNG" id="cropimage"/>
<input type="hidden" id="coordinate_x" />
<input type="hidden" id="coordinate_y" />
<input type="hidden" id="coordinate_w" />
<input type="hidden" id="coordinate_h" />
</div>
</body>
</html>
Code generate the following output
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script src="jquery.Jcrop.js"></script>
<link href="jquery.Jcrop.css" rel="stylesheet" />
<script>
$(function () {
$("#cropimage").Jcrop({
onSelect: croparea
});
})
function croparea(c) {
$("#coordinate_x").val(c.x);
$("#coordinate_y").val(c.y);
$("#coordinate_w").val(c.w);
$("#coordinate_h").val(c.h);
};
</script>
</head>
<body>
<div>
<img src="image/12.PNG" id="cropimage"/>
<input type="hidden" id="coordinate_x" />
<input type="hidden" id="coordinate_y" />
<input type="hidden" id="coordinate_w" />
<input type="hidden" id="coordinate_h" />
</div>
</body>
</html>
Code generate the following output
