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

}


版权声明:本文为博主原创文章,未经博主允许不得转载。 举报

相关文章推荐

jQuery插件imgAreaSelect(图片 区域选择显示)

插件imgAreaSelect 作用是图片区域选择显示 先上图片 再上代码   div.preview_div{overflow...

适应各浏览器图片裁剪无刷新上传js插件

很多时候在项目中需要用到将图片的其中一部分裁剪后再使用的功能,比如像上传个人头像什么的!用户上传一张大图,但是需要裁剪其中的一块作为头像,我看到很多地方都采用了flash的方式,当然使用flash是不...

我是如何成为一名python大咖的?

人生苦短,都说必须python,那么我分享下我是如何从小白成为Python资深开发者的吧。2014年我大学刚毕业..

imgareaselect + php实现图片裁剪

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

Nmap 源码学习一 下载编译

简介nmap是一款开源免费的扫描工具,学习其源码有助于加深对网络基础知识的理解。我对网络的基础知识一直是了解却不深入,以前也用c写过探测操作系统指纹的程序。现在为了深入学习网络安全知识,决定系统化学习...
  • xundh
  • xundh
  • 2015-06-16 22:20
  • 1872

php+jquery插件imgAreaSelect图片裁剪保存

背景:项目中需要在原来提供的搜索图片基础上,进行裁剪后还可以接着搜索的功能。 首先:因为之前没做过这类需求,所以先谷歌百度了下php裁剪图片关键字。得到了一个关键方法imagecopy(),这个方法...

【PHP】PHP图像裁剪缩略裁切类源代码及使用方法

原因最近在做网页拖拽验证码的开源项目,需要在服务端生成图片对应的可移动的色块,但是网上的资源都是做缩略图,对整个图片进行缩放的,所以自己动手,完成了对图片进行裁剪小块的工具CODE <?phpname...

PHP Uploadify+jQuery.imgAreaSelect插件+AJAX 实现图片上传裁剪 仿微博头像上传功能

大家好本文为Daditao原创,希望尊重个人知识劳动

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

Imgareaselect 是一个 允许用户使用简单、直观的点击、拖动界面图像选择矩形区域的jQuery插件。该插件可用于 web 应用程序中轻松实现图像裁剪功能,以及其他功能,如照片标记、 图像编辑...
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

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