In this article i will see how to crop an image in server site using java . I will use the client jquery plugin jCrop .
Server site
Java image package provide way to crop image.this article we will create a sample project for image crop.we using eclipse for this.
1. Open eclipse and create new project ImageCrop. go File ->New->Dynamic Web Project.
2. Create Crop.java servlet in ImageCrop project. Right click in src select New->servlet.
package com.rid.controller;
import java.awt.image.BufferedImage;
import java.io.File;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.Date;
import javax.imageio.ImageIO;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
@WebServlet("/Crop")
public class Crop extends HttpServlet {
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doPost(request, response);
}
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
String basePath = request.getServletContext().getRealPath("/");
int cropX=0,cropY=0,cropW=0,cropH=0;
cropX= Integer.parseInt(request.getParameter("cropX"));
cropY= Integer.parseInt(request.getParameter("cropY"));
cropW= Integer.parseInt(request.getParameter("cropW"));
cropH= Integer.parseInt(request.getParameter("cropH"));
System.out.println(basePath+"image/flower.jpg");
File file =new File(basePath+"image/flower.jpg");
BufferedImage outImage=ImageIO.read(file);
int type = outImage.getType() == 0? BufferedImage.TYPE_INT_ARGB : outImage.getType();
BufferedImage cropImage=outImage.getSubimage(cropX, cropY,cropW, cropH );
String outputPath="image/"+(new Date()).getTime()+"flower.jpg";
File cropfile = new File(basePath+outputPath);
ImageIO.write(cropImage, "jpg",cropfile);
PrintWriter out =response.getWriter();
out.write("<img src='"+outputPath+"' height=200 border=1 />");
out.close();
}
}
Client site
Client site we will using jquery Jcrop plugins.jCrop is the quickest and easiest way to add functionality to cut images for your web application.download the plugin at this link: http://deepliquid.com/content/Jcrop_Download.html
2. Create index.jsp . Right click in Web Content folder. New->jsp.
3. Write below code in jsp.
<!DOCTYPE>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://jcrop-cdn.tapmodo.com/v0.9.12/js/jquery.Jcrop.min.js"></script>
<link rel="stylesheet" href="http://jcrop-cdn.tapmodo.com/v0.9.12/css/jquery.Jcrop.css" type="text/css" />
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Image Crop</title>
<script language="Javascript">
function showCoords(c) {
// get image natural height/width for server site crop image.
var imageheight = document.getElementById('cropbox').naturalHeight;
var imagewidth = document.getElementById('cropbox').naturalWidth;
var xper = (c.x * 100 / jQuery('#cropbox').width());
var yper = (c.y * 100 / jQuery('#cropbox').height());
var wPer = (c.w * 100 / jQuery('#cropbox').width());
var hper = (c.h * 100 / jQuery('#cropbox').height());
var actX = (xper * imagewidth / 100);
var actY = (yper * imageheight / 100);
var actW = (wPer * imagewidth / 100);
var actH = (hper * imageheight / 100);
jQuery('#x').val(parseInt(actX));
jQuery('#y').val(parseInt(actY));
jQuery('#w').val(parseInt(actW));
jQuery('#h').val(parseInt(actH));
};
jQuery(document).ready(function() {
var w = 100;
var h = 100;
var W = jQuery('#cropbox').width();
var H = jQuery('#cropbox').height();
var x = W / 2 - w / 2;
var y = H / 2 - h / 2;
var x1 = x + w;
var y1 = y + h;
jQuery('#cropbox').Jcrop({
onChange : showCoords,
onSelect : showCoords,
setSelect : [ x, y, x1, y1 ]
,minSize : [ 100, 100 ] // use for crop min size
,aspectRatio : 1 / 1 // crop ration
});
jQuery('#CropButton').click(function() {
var cropX = jQuery('#x').val();
var cropY = jQuery('#y').val();
var cropW = jQuery('#w').val();
var cropH = jQuery('#h').val();
var request_Data = {
cropX : cropX,
cropY : cropY,
cropW : cropW,
cropH : cropH
}
$.post("Crop", request_Data, function(data) {
$("#output").html(data);
});
});
});
</script>
</head>
<body>
<center>
<table border="1">
<tr>
<td><input type="button" value="Crop" id="CropButton" /> <img
src="image/flower.jpg" id="cropbox" height="500" border="1" />
</td>
<td>
output<br>
<div id="output" height="100"></div>
</td>
</tr>
</table>
<br> <label><input type="text" size="4" id="x" name="l" /></label>
<label><input type="text" size="4" id="y" name="t" /></label> <label><input
type="text" size="4" id="w" name="w" /></label> <label><input
type="text" size="4" id="h" name="h" /></label>
</center>
</body>
</html>
4. Run project. you see below result.
source code : ImageCrop
Enjoy
Thank you very much. This was very useful.
ReplyDeletehello, riddhima!
ReplyDeleteI'm Carlos from Brazil.
Thanks for your 'Java/jquery crop image' tutorial.
And I ask you:
I need to save the cropped image. can you help me?
Big hug.