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.js插件+JAVA后台实现图片裁剪保存功能

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

Java 使用imgAreaSelect插件进行图片上传切割

近期共组需要进行图片的上传以及切割,网上搜集了下资料,采用了jquery.imgareaselect.js 插件进行了图片的切割(也可考虑Jcrop),以及ajaxFileupload.js进行文件上...
  • u013361445
  • u013361445
  • 2015年10月20日 19:55
  • 1374

imgareaselect+java实现图片裁剪保存

1、需求包: jquery.imgareaselect.js jquery.imgareaselect.pack.js jquery-1.6.1.min.js ajaxfileup...
  • mrliu20082009
  • mrliu20082009
  • 2012年03月23日 09:32
  • 8812

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

将用户上传的图片进行裁剪再保存是现在web2.0应用中常常处理的工作,现在借助jquery的imgareaselect插件再配合PHP的GD库就可以轻松的实现这个在以前来说非常棘手的功能。我们来看看它...
  • u010363836
  • u010363836
  • 2014年07月29日 16:03
  • 2059

ios-对图片进行裁剪得到一个新图片和保存到相册

在ios10我们需要在info.plist文件中设置下这样的一个键值对Privacy - Photo Library Usage Description,后面的value你可以自己写你想要的提示信息 ...
  • ZCMUCZX
  • ZCMUCZX
  • 2017年07月31日 21:20
  • 188

Android 图片裁剪及保存

最近项目中有个需求,就是进行图片的裁剪。 裁剪分为两种方式:1.矩形框裁剪 2.手势裁剪 在手势裁剪的过程中遇到一个问题,就是图片裁剪之后,背景不是透明的,下面给出我的解决方案。@Suppress...
  • wudu1227
  • wudu1227
  • 2016年08月31日 15:40
  • 1153

截取页面并上传保存图片

此实例是用html2canvas 插件生成图片,然后通过ajax 提交到ruby后台存储成图片。 1加载js  script type="text/javascript" src="h...
  • KLoong999
  • KLoong999
  • 2017年04月20日 13:00
  • 321

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

利用jquery的imgAreaSelect插件实现图片裁剪示例 将用户上传的图片进行裁剪再保存是现在web2.0应用中常常处理的工作,现在借助jquery的imgareaselect插件再配合PH...
  • hytfly
  • hytfly
  • 2013年04月21日 15:13
  • 3082

Android图片裁剪实现(EnjoyCrop)

Android图片裁剪实现
  • zzxzhyt
  • zzxzhyt
  • 2016年05月07日 12:58
  • 4100

关于PHP+JQuery图片上传,裁剪,并存储的一些总结

关于JS的三大误区。==误区1:js可以生成图片文件?==js不能操作文件,只能形成裁剪效果,无法生成图片文件。==误区2:js选择文件时,可以获得文件路径。==js选择文件时,无法获取文件在个人电脑...
  • qq_16885135
  • qq_16885135
  • 2016年08月12日 11:10
  • 1999
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:imgareaselect+java实现图片裁剪保存
举报原因:
原因补充:

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