Image Cropping in Jquery (with Jcrop)

<img id="target" src="pool.jpg" />
<script src="js/jquery.min.js"></script>
<script src="js/jquery.Jcrop.min.js"></script>
<link href="css/jquery.Jcrop.css" rel="stylesheet" type="text/css" />
jQuery(function($) {
$('#target').Jcrop();
});

Useful Attributes and Events in Jcrop:

<script language="Javascript">    function selectedCoordinates(c)
{
// variables can be accessed here as
// c.x, c.y, c.x2, c.y2, c.w, c.h
};
function changingCoordinates(c)
{
// variables can be accessed here as
// c.x, c.y, c.x2, c.y2, c.w, c.h
};
function finalCoordinates(c)
{
// variables can be accessed here as
// c.x, c.y, c.x2, c.y2, c.w, c.h
};
jQuery(function($) { $('#target').Jcrop({
onSelect: selectedCoordinates,
onChange: changingCoordinates,
onRelease: finalCoordinates,
aspectRatio: 2 / 3,
minSize: [2,100],
maxSize: [500, 750]
});
});
</script>

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store