Cropping Image in Java Servlet/JSP using JQuery

Hi,

Below example shows how to crop an Image using JQuery crop plugin using Java Servlet

Step 1

Create JSP/Html Page

<script src=”jquery.min.js”></script>
<script src=”jcrop_demos.js”></script>
<link rel=”stylesheet” href=”jquery.Jcrop.css” type=”text/css” />
<link rel=”stylesheet” href=”demo.css” type=”text/css” />
<script language=”Javascript”>
// Remember to invoke within jQuery(window).load(…)
// If you don’t, Jcrop may not initialize properly
jQuery(document).ready(function(){
jQuery(‘#cropbox’).Jcrop({
onChange: showCoords,
onSelect: showCoords
});
});

// Our simple event handler, called from onChange and onSelect
// event handlers, as per the Jcrop invocation above
function showCoords(c)
{
jQuery(‘#x’).val(c.x);
jQuery(‘#y’).val(c.y);
jQuery(‘#x2’).val(c.x2);
jQuery(‘#y2’).val(c.y2);
jQuery(‘#w’).val(c.w);
jQuery(‘#h’).val(c.h);
};

</script>
<!– http://localhost:8080/TestJ2EE/cropTest?t=50&l=60&w=90&h=50&i=logo_plain.jpg&f=jpg –>
<a href=”<%=request.getContextPath()%>/testDownload”>downlaod</a>
<!– This is the image we’re attaching Jcrop to –>

<img src=”logo_plain.jpg” id=”cropbox” />
<form action=”http://localhost:8080/TestJ2EE/cropTest1&#8243; method=”get”>
<label>X1 <input type=”text” size=”4″ id=”x” name=”l” /></label>
<label>Y1 <input type=”text” size=”4″ id=”y” name=”t” /></label>
<label>W <input type=”text” size=”4″ id=”w” name=”w” /></label>
<label>H <input type=”text” size=”4″ id=”h” name=”h” /></label>
<input type=”hidden” size=”4″ id=”f” name=”f” value=”jpg” />
<input type=”hidden” size=”4″ id=”i” name=”i” value=”logo_plain.jpg” />
<input type=”submit” />
</form>

———————————————–

Step 2
Create a Servlet

/**
*
*/
package com.test;

import java.awt.image.BufferedImage;
import java.io.ByteArrayOutputStream;
import java.io.File;
import java.io.IOException;

import javax.imageio.ImageIO;
import javax.servlet.ServletException;
import javax.servlet.ServletOutputStream;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

/**
* Crop
* @author RVashi
*
*/
public class MyOwnCropServlet extends HttpServlet {

private static final long serialVersionUID = 1L;

public void doGet(HttpServletRequest req, HttpServletResponse res) throws IOException,ServletException{

int t=Integer.parseInt(req.getParameter(“t”));
int l=Integer.parseInt(req.getParameter(“l”));
int w=Integer.parseInt(req.getParameter(“w”));
int h=Integer.parseInt(req.getParameter(“h”));
String imagePath=getServletContext().getRealPath(“/”)+req.getParameter(“i”);
BufferedImage outImage=ImageIO.read(new File(imagePath));
BufferedImage cropped=outImage.getSubimage(l, t, w, h);
ByteArrayOutputStream out=new ByteArrayOutputStream();
ImageIO.write(cropped, req.getParameter(“f”), out);

ImageIO.write(cropped, req.getParameter(“f”), new File(getServletContext().getRealPath(“”)+System.getProperty(“file.separator”)
+”cropped.jpg”)); // save the file with crop dimensions

//res.setContentType(“image/jpg”);
ServletOutputStream wrt=res.getOutputStream();
wrt.write(out.toByteArray());
wrt.flush();
wrt.close();

}

}

Thanks

R Vashi

Advertisements

4 thoughts on “Cropping Image in Java Servlet/JSP using JQuery

  1. Himanshu Goyal

    the code for cropping using jquery and servlet is not working properly
    please tell me what are the requirement to be fulfilled for the same

    tell which kind of plugins i need to have on my side

    urgent

    Reply
    1. Wesley Choate

      In the javascript you will need to take out these two lines since x2 and y2 are not defined anywhere in the page.

      jQuery(‘#x2′).val(c.x2);
      jQuery(‘#y2′).val(c.y2)

      Reply

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s