Image Cropping in Jquery (with Jcrop)

We are having many image cropping plugins developed in jquery that are being used to crop an image. Jcrop is one of the plugins developed in Jquery. Jcrop is very easy to learn. In the current blog post we’ll see how to use Jcrop to crop an image.

We will take the following image tag to see how jcrop is used.

<img id="target" src="pool.jpg" />

Download the latest version of JCrop.js and Jcrop.css and keep them in your html file as below.

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

Initialise the Jcrop with the image tag as follows.

jQuery(function($) {
   $('#target').Jcrop();
});

With the above snippet will convert the image tag into a widget to crop the image.

Useful Attributes and Events in Jcrop:

Attributes:

1. aspectRatio: Aspect ratio of w/h (e.g. 1 for square) this will keep the aspect ratio for the selected area in the image.
2. minSize, maxSize: These two will keep the minimum and maximum cropping sizes of the image respectively. 

Events:

1. onSelect: This is called when the selection is completed.
2. onRelease: This is called when the selected area is released.
3. onChange: This is called when the selection is moving.

All the above 3 events  will give the coordinates of the selected area like width, height, x-coordinate...etc., 

Here is the complete example of how the above attributes and events used.

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

Posted On 30 May 2014 By MicroPyramid


Need any Help in your Project?Let's Talk

Latest Comments
Related Articles
Using CasperJS to scrape website data

CasperJS can be used for Navigation Scipting, Scraping and testing. In this Tutorial we will see how to scrape data from website using CasperJS and ...

Continue Reading...
Google Analytics Graphs to your Dashboard in Python Web Frameworks

Ecommerce solution providers like OpenCart, Magento Provide extensions to see Google analytics data in their own dashboards as graphs. whereas there are no such plugins ...

Continue Reading...
jQuery mouse events and touch events

jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler ...

Continue Reading...
open source packages

Subscribe To our news letter

Subscribe and Stay Updated about our Webinars, news and articles on Django, Python, Machine Learning, Amazon Web Services, DevOps, Salesforce, ReactJS, AngularJS, React Native.
* We don't provide your email contact details to any third parties