jQuery Jcrop Plugin


Jquery contains various plugins providing different functionalities, like the NPM package, and Jcrop is one of them. The Jcrop plugin allows developers to add functionalities related to image cropping in the application.

Sometimes, we require to allow users to crop images. For example, if we build an extension or application that takes a screenshot of a selected portion, we require users to choose the screen portion and take screenshots.

The Jcrop plugin allows users to select an element and crop it. Also, we can use parameters with the Jcrop plugin to customize the cropping functionality.

Syntax

Users can follow the syntax below to use the Jcrop plugin of JQuery to allow users to crop the image.

$('img').Jcrop({
   // other parameters
   onSelect: cropImage
});

In the above syntax, we selected the image and used the Jcrop() method by passing an object containing various key-value pairs as a parameter. The main parameter we require is ‘onSelect’, which executes the cropImage() function whenever we select an image.

Example 1

In the example below, we added the CDN of the JCrop plugin in the <head> tag to use it in the code. After that, we used the ‘aspectRatio: 1’ parameter to allow users to select only the square portions. Also, we used the ‘onSelect: cropImage’ to execute the cropImage() function when users select an image.

In the cropImage() function, we access selected portions' coordinates, values, and dimensions and initialize the input fields with those values. Also, we used the various properties and methods of canvas to draw a selected portion on the canvas.

In the output, users can select the image portion, and it will show the selected portion.

<html>
<head>
   <link rel = "stylesheet" type = "text/css"
   href = "https://cdnjs.cloudflare.com/ajax/libs/jquery-jcrop/0.9.15/css/jquery.Jcrop.min.css" />
   <script src = "https://code.jquery.com/jquery-3.6.0.min.js"> </script>
   <script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery-jcrop/0.9.15/js/jquery.Jcrop.min.js"> </script>
   <style type = "text/css">
      #image-preview {
         max-width: 500px;
         max-height: 500px;
         margin-top: 20px;
      }
   </style>
</head>
<body>
   <h2>Select a portion to crop image using the <i> jQuery's Jcrop</i> plugin</h2>
   <div>
      <img src = "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRk3gArjxa8GTlmbOY2NBaF8mnoWO89SWf-2shdTtnAMfFiWXfuAMFXVulgOqd59FoD6_c&usqp=CAU"
      id = "crop-image" />
   </div> <br>
   <form>
      <label> X: </label> <input type = "number" size = "4" id = "x" />
      <label> Y: </label> <input type = "number" size = "4" id = "y" />
      <label> Width: </label> <input type = "number" size = "4" id = "width" />
      <label> Height: </label> <input type = "number" size = "4" id = "height" />
   </form>
   <div>
      <canvas id = "image-preview"> </canvas>
   </div>
   <script type="text/javascript">
      $(document).ready(function () {
         $('#crop-image').Jcrop({
            aspectRatio: 1,
            onSelect: cropImage
         });
      });
      function cropImage(coOrdinates) {
         $('#x').val(coOrdinates.x);
         $('#y').val(coOrdinates.y);
         $('#width').val(coOrdinates.w);
         $('#height').val(coOrdinates.h);
         var img = new Image();
         img.onload = function () {
            var canvas = document.getElementById('image-preview');
            var ctx = canvas.getContext('2d');
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            ctx.drawImage(img, coOrdinates.x, coOrdinates.y, coOrdinates.w, coOrdinates.h, 0, 0, canvas.width, canvas.height);
         };
         img.crossOrigin = "anonymous";
         img.src = $('#crop-image').attr('src');
      }
   </script>
</body>
</html>

Example 2

In the example below, we used the various parameters with the Jcrop plugin. The ‘setSelect’ allows us to set the starting position of the bounding box. The ‘allowResize’ takes a boolean value allowing users to resize the bounding box. The ‘allowSelect’ also takes a boolean value allowing users to select the image portion or use the same bounding box. The ‘minS’ze' and ‘maxBound’ allow us to set bounding box dimensions.

Here, users can change the position of the selection box and observe that it shows the zoomed version of the particular portion of an image. So, we can create a zooming tool also using the Jcrop plugin.

<html>
<head>
   <link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/jquery-jcrop/0.9.15/css/jquery.Jcrop.min.css" />
   <script src = "https://code.jquery.com/jquery-3.6.0.min.js"> </script>
   <script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery-jcrop/0.9.15/js/jquery.Jcrop.min.js"> </script>
   <style type = "text/css">
      #image-preview {
         max-width: 500px;
         max-height: 500px;
         margin-top: 20px;
      }
      #crop-form { display: none;}
   </style>
</head>
<body>
   <h2>Using the Jcrop plugin to create a crop tool and zoom in on the image</h2>
   <div>
      <img src = "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRk3gArjxa8GTlmbOY2NBaF8mnoWO89SWf-2shdTtnAMfFiWXfuAMFXVulgOqd59FoD6_c&usqp=CAU"
      id = "crop-image" />
   </div> <br>
   <div> <canvas id = "image-preview"> </canvas>  </div>
   <script type="text/javascript">
      $(document).ready(function () {
         $('#crop-image').Jcrop({
            aspectRatio: 1,
            onSelect: cropImage,
            setSelect: [30, 30, 200, 200],
            bgColor: 'black',
            bgOpacity: 0.5,
            allowResize: false,
            allowSelect: false,
            keySupport: false,
            minSize: [150, 150],
            maxBound: [500, 500]
         });
      });
      function cropImage(coOrdinates) {
         var img = new Image();
         img.onload = function () {
            var canvas = document.getElementById('image-preview');
            var ctx = canvas.getContext('2d');
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            ctx.drawImage(img, coOrdinates.x, coOrdinates.y, coOrdinates.w, coOrdinates.h, 0, 0, canvas.width, canvas.height);
         };
         img.crossOrigin = "anonymous";
         img.src = $('#crop-image').attr('src');
         $('#crop-form').show();
      }
   </script>
</body>
</html>

We learned to use the Jcrop plugin of JQuery to crop an image. In the first example, we allow users to crop images by selecting an image, and in the second example, we created the zooming tool.

Also, developers can pass different parameters while calling the Jcrop() method and customize the cropping functionality.

Updated on: 05-May-2023

675 Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements