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


 

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

In this tutorial, we will crop image using jQuery plug-in & 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.

ImageCrop.jsp

<html>
<head>

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

$(function(){

$('#cropbox').Jcrop({
aspectRatio: 1,
onSelect: updateCoords
});

});

function updateCoords(c)
{
$('#x').val(c.x);
$('#y').val(c.y);
$('#w').val(c.w);
$('#h').val(c.h);
};

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

</script>

</head>

<body>

<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"
value="detroit-nights.jpg"/>
<input type="submit" value="Crop Image" />
</form>
</div>
</div>
</div>

</body>

</html>

ImageCrop.java

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;
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 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();

}

}

OUTPUT

When you select image :

When you press button 'Crop Image' :

Download Source Code

Ads