Recently I've implemented a cropper functionality based on the Java by using Java script API JCrop, an official plugin of JQuery. Here is how the cropper functionality works.

Lots of websites gives you about the crop functionality through PHP. JQuery official website also provides a demo in PHP. Here is how you can implement through Java programming language.

  1. Download the JCrop, an open source plugin of JQuery.
  2. Embed the JS and CSS for JCrop in JSP.
  3. Insert an image on your JSP (web page) with an unique ID
  4. Invoke the JCrop function on the unique ID of the image with all the required parameters i.e.; user can choose the dimensions so that JCrop utility will set the values to the hidden fields. Based on these values, you've to crop the image in Java.
  5. Write a servlet / struts action class to crop the image based on the parameters

The HTML output for your JSP should look like below


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
  <head>
    <script type="text/javascript" src="/cmint/js/jquerymin.js"></script>
    <script type="text/javascript" src="/cmint/js/jcrop.js"></script>
    <link rel="stylesheet" href="/cmint/css/myhc/jcrop.css" type="text/css" />
    <title>Crop and save</title>
  </head>
  <body>
    <img src="http://www.javaservletsjspweb.in/test/HC2.jpg" id="cropbox"/>
    <script type="text/javascript">
      $(window).load(function(){
        var jcrop_api;
        initJcrop();
        function initJcrop()
        {
          jcrop_api = $.Jcrop('#cropbox',{ onChange: setCoords, onSelect: setCoords });
          jcrop_api.setSelect([100,100,300,300]);
          jcrop_api.setOptions({ allowSelect: true, allowMove: true, allowResize: true, aspectRatio: 1 });
        }
      });
      function setCoords(c)
      {
        jQuery('#x1').val(c.x);
        jQuery('#y1').val(c.y);
        jQuery('#x2').val(c.x2);
        jQuery('#y2').val(c.y2);
        jQuery('#w').val(c.w);
        jQuery('#h').val(c.h);
       };
     </script>
     <form action="/cmint/cropper">
     <input type="hidden" name="file" value="HC2.jpg" />
     <input type="hidden" name="x1" id="x1"/>
     <input type="hidden" name="y1" id="y1"/>
     <input type="hidden" name="x2" id="x2"/>
     <input type="hidden" name="y2" id="y2"/>
     <input type="hidden" name="w" id="w"/>
     <input type="hidden" name="h" id="h"/>
     <input type="submit" value="Crop" name="action" />
   </form>
  </body>
</html>

Java program to crop the image

  1. Get the buffered image reference by reading the file, which was shown to user to crop
  2. Invoke the getSubImage method with the buffered image reference created in step 1 by passing the values user selected using cropper tool. getSubImage will return the buffered reader reference with the resultant image in the buffer.
  3. Store the image with the cropped buffered image 
package cropper.view;

import java.awt.image.BufferedImage;
import java.io.File;
import java.io.IOException;
import java.io.PrintWriter;
import javax.imageio.ImageIO;
import javax.servlet.*;
import javax.servlet.http.*;

/**
 * A servlet which crops the image based on the JCrop tools parameters
 * @author SANTHOSH REDDY MANDADI
 * @version 1.0
 * @since 04th September 2009
 */
public class ImageCropperSrv extends HttpServlet
{
  public void service(HttpServletRequest request, 
                     HttpServletResponse response) throws ServletException, IOException
  {
    //Get all the parameters which were populated by JCrop
    int x1=Integer.parseInt(request.getParameter("x1"));
    int y1=Integer.parseInt(request.getParameter("y1"));
    int x2=Integer.parseInt(request.getParameter("x2"));
    int y2=Integer.parseInt(request.getParameter("y2"));
    int w=Integer.parseInt(request.getParameter("w"));
    int h=Integer.parseInt(request.getParameter("h"));
    System.out.println(x1+" "+y1+" "+x2+" "+y2+" "+w+" "+" "+h);
    
    //Get the file name from the server
    String file=request.getParameter("file");
    
    String serverPath="/test/";
    String sourceFile=serverPath+file;
    //Forming the dest file path with t suffix. So, if the file is a.jpg, dest file will be at.jpg
    int x = sourceFile.lastIndexOf(".");
    String destFile = serverPath+(file.substring(0, x)+"t"+file.substring(x, file.length()));
    
    //Get the buffered image reference
    BufferedImage image=ImageIO.read(new File(sourceFile));

    //Get the sub image
    BufferedImage out=image.getSubimage(x1,y1,w,h);

    //Store the image to a new file
    ImageIO.write(out,"jpg",new File(destFile));
    
    //Sending the output to the client by showing the cropped image with dimensions
    PrintWriter printer=response.getWriter();
    response.setContentType("text/html");
    printer.println("Photo cropped from "+x1+","+y1+" to the width of "+w+" and height of "+h);
    printer.println("<img src=\""+destFile+"\" />");
  }
}

The above program has been tested under 1.4, 1.5, 1.6 and under Oracle App server, Apache Tomcat.

If you've sometime, why don't you checkout my other Java programs.