1、需求包：
jquery.imgareaselect.js
jquery.imgareaselect.pack.js
jquery-1.6.1.min.js
ajaxfileupload-min.js
json-lib-2.3-jdk15.jar
commons-fileupload-1.2.2.jar
2、前端页面
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link href="css/imgareaselect-default.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="js/jquery-1.6.1.min.js"></script> <script type="text/javascript" src="js/ajaxfileupload-min.js"></script> <script type="text/javascript" src="js/jquery.imgareaselect.min.js"></script> <script type="text/javascript" src="js/jquery.imgareaselect.pack.js"></script> <script type="text/javascript" src="js/upload.js"></script> </head> <body> <input type="hidden" name="x1" value="0" /> <input type="hidden" name="y1" value="0" /> <input type="hidden" name="x2" value="100" /> <input type="hidden" name="y2" value="100" /> <input id="fileToUpload" name="fileToUpload" type="file" onchange="uploadImage();"/> <div id="facediv" style="display:none;z-index:100;"> <img id="face" /> </div> </body> </html>
function uploadImage() {
$.ajaxFileUpload( {
url : 'photo',// 需要链接到服务器地址
fileElementId : 'fileToUpload',// 文件选择框的id属性
dataType : 'json',// 服务器返回的格式，可以是json
data : {"operation":1},
success : function(data) {
if (data['result'] == 1) {
$("#facediv").css({"display":"block"});
$("#face").attr("src",data['path']);
$('<div><img src="' + data['path'] + '" style="position: relative;" /><div>')
.css({
float: 'left',
position: 'relative',
overflow: 'hidden',
width: '100px',
height: '100px'
}).insertAfter($('#face'));
$('<button id="btnSubmit">提交</button>')
.click(function (){
cutImage(data['path']);
}).insertAfter($('#facediv'));
$('#face').imgAreaSelect({
maxWidth: 100, maxHeight: 100,
minWidth: 63, minHeight:63,
x1:0,y1:0,x2:100,y2:100,
aspectRatio: '1:1',
onSelectChange: function (img, selection) {
var scaleX = 100 / (selection.width || 1);
var scaleY = 100 / (selection.height || 1);
$('#face + div > img').css({
width: Math.round(scaleX * 400) + 'px',
height: Math.round(scaleY * 300) + 'px',
marginLeft: '-' + Math.round(scaleX * selection.x1) + 'px',
marginTop: '-' + Math.round(scaleY * selection.y1) + 'px'
});
},
onSelectEnd: function (img, selection) {
$('input[name="x1"]').val(selection.x1);
$('input[name="y1"]').val(selection.y1);
$('input[name="x2"]').val(selection.x2);
$('input[name="y2"]').val(selection.y2);
}
});
}
},
error : function(data) {
}
});
}
function cutImage(path) {
$.ajax( {
type : "POST",
url:"photo",
dateType:"json",
data:{"operation":2,"x1":$('input[name="x1"]').val(),
"x2":$('input[name="x2"]').val(),
"y1":$('input[name="y1"]').val(),
"y2":$('input[name="y2"]').val(),
"path":path},
success : function(data) {
top.location.href="photo_view.vm?path="+data["path"];
},
error:function(data) {
}
});
}
3、后台处理：
public class PhotoServlet extends HttpServlet {
private static final long serialVersionUID = 5653610348191435218L;
@Override
protected void doPost(HttpServletRequest request, HttpServletResponse resp)
throws ServletException, IOException {
String requestType = request.getContentType();
if (requestType != null && requestType.indexOf("multipart/form-data") != -1) {
FileItemFactory factory = new DiskFileItemFactory();
ServletFileUpload upload = new ServletFileUpload(factory);
List items;
try {
items = upload.parseRequest(request);
Iterator iter = items.iterator();
String webRoot = request.getSession().getServletContext()
.getRealPath("/");
while (iter.hasNext()) {
FileItem item = (FileItem) iter.next();
if (!item.isFormField()) {
String suffix = item.getName().substring(item.getName().lastIndexOf("."));
String name = String.valueOf(System.currentTimeMillis());
StringBuffer sourcePath = new StringBuffer();
sourcePath.append(webRoot);
sourcePath.append(File.separator);
sourcePath.append("tmp");
sourcePath.append(File.separator);
sourcePath.append(name);
sourcePath.append("_source");
sourcePath.append(suffix);
File imageFile= new File(sourcePath.toString());
if (!imageFile.getParentFile().exists()) {
imageFile.getParentFile().mkdirs();
}
item.write(imageFile);
JSONObject result = new JSONObject();
result.put("result", 1);
result.put("path", "http://localhost:8080/testxml/tmp/" + imageFile.getName());
this.responseJSON(resp, result.toString());
break;
}
}
} catch (FileUploadException e) {
// TODO Auto-generated catch block
e.printStackTrace();
} catch (Exception e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
} else {
Integer x1 = Integer.parseInt(request.getParameter("x1"));
Integer y1 = Integer.parseInt(request.getParameter("y1"));
Integer x2 = Integer.parseInt(request.getParameter("x2"));
Integer y2 = Integer.parseInt(request.getParameter("y2"));
String path = request.getParameter("path");
String fileName = path.substring(path.lastIndexOf("/")+1);
String suffix = fileName.substring(fileName.lastIndexOf("."));
String webRoot = request.getSession().getServletContext().getRealPath("/");
StringBuffer sourcePath = new StringBuffer();
sourcePath.append(webRoot);
sourcePath.append(File.separator);
sourcePath.append("tmp");
sourcePath.append(File.separator);
sourcePath.append(fileName);
StringBuffer targetPath = new StringBuffer();
targetPath.append(webRoot);
targetPath.append(File.separator);
targetPath.append("tmp");
targetPath.append(File.separator);
targetPath.append(fileName.substring(0, fileName.lastIndexOf("_")));
targetPath.append(suffix);
cutImage(suffix.substring(1), sourcePath.toString(), targetPath.toString(),
x1, y1, x2, y2);
new File(sourcePath.toString()).delete();
JSONObject result = new JSONObject();
result.put("result", 1);
result.put("path", "http://localhost:8080/testxml/tmp/" + fileName.substring(0, fileName.lastIndexOf("_")) + suffix);
resp.setContentType("application/json");
this.responseJSON(resp, result.toString());
}
}
protected void responseJSON(HttpServletResponse response, String jsonStr) {
response.setCharacterEncoding("utf-8");
PrintWriter writer;
try {
writer = response.getWriter();
writer.write(jsonStr);
writer.flush();
} catch (IOException e) {
}
}
public static void cutImage(String suffix, String sourcePath, String targetPath,
int x1, int y1, int x2, int y2) {
try {
Image img;
ImageFilter cropFilter;
File sourceImgFile = new File(sourcePath);
BufferedImage bi = ImageIO.read(sourceImgFile);
int srcWidth = bi.getWidth();
int srcHeight = bi.getHeight();
int destWidth = x2 - x1;
int destHeight = y2 - y1;
if (srcWidth >= destWidth && srcHeight >= destHeight) {
Image image = bi.getScaledInstance(srcWidth, srcHeight,
Image.SCALE_DEFAULT);
cropFilter = new CropImageFilter(x1, y1, destWidth, destHeight);
img = Toolkit.getDefaultToolkit().createImage(
new FilteredImageSource(image.getSource(), cropFilter));
BufferedImage tag = new BufferedImage(destWidth, destHeight,
BufferedImage.TYPE_INT_RGB);
Graphics g = tag.getGraphics();
g.drawImage(img, 0, 0, null);
g.dispose();
ImageIO.write(tag, suffix, new File(targetPath));
}
} catch (Exception e) {
e.printStackTrace();
}
}
}