Share on Google+Share on Google+

Crop Image using plug-in ,JSP and 'Servlet'

In this tutorial, we will crop image using jQuery plug-in & servlet.

Crop Image using plug-in ,JSP and 'Servlet'

In this tutorial, we will crop image using jQuery plug-in & servlet. In this example, a image & a button is given.When you press button 'crop image' , it will crop the portion of image which is selected by you. The cropped image will save in the same folder in which your original image is saved. The image 'area selection' effects are implemented by the jQuery. And the cropping of image is originally done using the  servlet. For this purpose we are using 'imageio' class of java.



<script src="jquery-1.4.2.js"></script>
<script src="jquery.Jcrop.js"></script>
<link rel="stylesheet" href="css/jquery.Jcrop.css"
type="text/css" />
<link rel="stylesheet" href="css/demos.css" type="text/css" />

<script language="Javascript">


aspectRatio: 1,
onSelect: updateCoords


function updateCoords(c)

function checkCoords()
if (parseInt($('#w').val())) return true;
alert('Please select a crop region then press submit.');
return false;




<div id="outer">
<div class="jcExample">
<div class="article">

<h1>Jcrop - Crop Image</h1>

<!-- This is the image we're attaching Jcrop to -->
<img src="detroit-nights.jpg" id="cropbox" />

<!-- This is the form that our event handler fills -->
<form action="servlet/ImageCrop" method="get"
 onsubmit="return checkCoords();">
<input type="hidden" id="x" name="l" />
<input type="hidden" id="y" name="t" />
<input type="hidden" id="w" name="w" />
<input type="hidden" id="h" name="h" />
<input type="hidden" size="4" id="f" name="f" value="jpg" />
<input type="hidden" size="4" id="i" name="i"
<input type="submit" value="Crop Image" />



import java.awt.image.BufferedImage;

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;
public class ImageCrop 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 File(imagePath));
BufferedImage cropped=outImage.getSubimage(l, t, w, h);
ByteArrayOutputStream out=new ByteArrayOutputStream();
ImageIO.write(cropped,req.getParameter("f"), out);

new File(getServletContext().getRealPath("")+System.getProperty("file.separator")
+"cropped.jpg")); // save the file with crop dimensions

ServletOutputStream wrt=res.getOutputStream();




When you select image :

When you press button 'Crop Image' :

Download Source Code


Posted on: August 7, 2010 If you enjoyed this post then why not add us on Google+? Add us to your Circles

Share this Tutorial Follow us on Twitter, or add us on Facebook or Google Plus to keep you updated with the recent trends of Java and other open source platforms.