imgareaselect+java实现图片裁剪保存

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

}


阅读更多
个人分类: java javascript
上一篇LoadRunner对funambol性能测试
下一篇Loadrunner监控linux服务器资源
想对作者说点什么? 我来说一句

ASP上传图片裁剪代码

2011年06月13日 28KB 下载

.net 实现图片裁剪保存

2018年04月03日 25.08MB 下载

没有更多推荐了,返回首页

关闭
关闭