imgareaselect+java实现图片裁剪保存

原创 2012年03月23日 09:32:39

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

}


相关文章推荐

Delphi7高级应用开发随书源码

  • 2003年04月30日 00:00
  • 676KB
  • 下载

基于jquery的imgAreaSelect.js插件+JAVA后台实现图片裁剪保存功能

Imgareaselect 是一个 允许用户使用简单、直观的点击、拖动界面图像选择矩形区域的jQuery插件。该插件可用于 web 应用程序中轻松实现图像裁剪功能,以及其他功能,如照片标记、 图像编辑...

imgareaselect + php实现图片裁剪

简介imgareaselect的js图片裁剪控件。 官方网址: http://odyniec.net/projects/imgareaselect/使用引用css /js/jquery.img...
  • xundh
  • xundh
  • 2015年06月16日 10:22
  • 1239

利用jquery的imgAreaSelect插件实现图片裁剪示例

利用jquery的imgAreaSelect插件实现图片裁剪示例 转自  http://www.cnblogs.com/mizzle/archive/2011/10/13/2209891.h...

jQuery插件imgAreaSelect图片裁剪使用详解

1、介绍 ImgAreaSelect是一jQuery插件,它支持用户通过鼠标拖曳选择图片的一部分,非常的fashion。另外,可以在这个选择图像区域的基础上应用网站的其他一些技术,比如图片拖曳、图片...

使用imgareaselect 辅助后台进行图片裁剪

因为项目当中用到图片裁剪,本来可以不用到投胎进行裁剪的,但是要兼容万恶的IE浏览器,所以不得不使用后台进行裁剪。 这次使用到imgareaselect 插件获取需要裁剪区域的坐标,再由后台进行裁剪操作...
  • hzf1993
  • hzf1993
  • 2017年03月01日 16:55
  • 1330

imgareaselect图片裁剪、js裁剪案例

imgareaselect官网:http://odyniec.net/projects/imgareaselect/ 进行下载、以及查看官网案例、文档。...

java实现的图片裁剪源码

  • 2015年10月14日 10:19
  • 2KB
  • 下载

Java实现图片裁剪预览

  • 2015年07月08日 17:25
  • 292KB
  • 下载

java实现图片裁剪、缩放功能

这几天在写一个博客的Demo,然后就碰到了这么一个问题,那些网站上点击个人头像就可以更换编辑的功能是怎么实现的?带着这么一个需求,我就在网络上搜集资料。整理了一下。图片真正被裁剪是在后端实现的。至于前...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:imgareaselect+java实现图片裁剪保存
举报原因:
原因补充:

(最多只允许输入30个字)