通过Jcrop可以很好的实现图片剪裁功能。

一.引用的JS和css

<script type="text/javascript" src="../jquery.min.js"></script>

二.JSP页面中的html元素

编辑图片和预览图片

 三.页面中的js控制代码

/** 页面加载完即处理：1.确定按钮绑定单击事件 2.绑定页面事件：离开即删除临时文件3.初始化截图框**/$(function(){$('.btn-submit:first').click(function(){	saveImagecut();	return false;});	/** 离开页面时删除临时文件 **/$(window).unload(function(){	var id = "
    ";	if(id){		deleteTempFile(id);	}});/** x,y,w,h设置为0初始化未选中 **/x = 0;y = 0;w = 0;h = 0;initJcrop();	return;});

/** 初始化截图框 **/function initJcrop(){	if($('#target').attr('readyState') == 'uninitialized'){		if(initCount++ > 5){			alert('照片编辑初始化失败');		}else{			setTimeout("initJcrop()", 500);			return;		}	}	$('#target').Jcrop({		onChange : updatePreview,		onSelect: updatePreview,		aspectRatio: <%=aspectRatio%>	},function(){		jcrop = this;		doesInit = true;	});	jcrop.animateTo([52,4,264,286]);}

/** 截图框大小改变时触发事件 **/function updatePreview(coords) {	// 储存左上点坐标和截图框宽高	x = parseInt(coords.x);	y = parseInt(coords.y);	w = parseInt(coords.w);	h = parseInt(coords.h);		// 将缩略图显示出来	$('.preview-container').show();		var imgWidth = $('#target').width();	var imgHeight = $('#target').height();	var rx = 0,ry = 0;	var width = <%=maxCutWidth%>;	var height = width / <%=aspectRatio%>;	if(coords.w != 0){	 	rx = width / coords.w;	}	if(coords.h != 0){	 	ry = height / coords.h;	}		$('#preview').css({		width: Math.round(rx * imgWidth) + 'px',		height: Math.round(ry * imgHeight) + 'px',		marginLeft: '-' + Math.round(rx * coords.x) + 'px',		marginTop: '-' + Math.round(ry * coords.y) + 'px'	});};/** 同步删除临时文件 **/function deleteTempFile(id) {	var result = false;	$.ajax({		async : false,		url : 'cardDeleTemFold.action?id=' + id + '&r=' + new Date().getTime(),		success : function(data){			// alert("删除临时文件成功");			var json = $.parseJSON(data);			if(json.msg == 'success'){				result = true;			}else{				try{					console.error(json.msg);				}catch(e) {};			}		}	});	return true;}

/** 保存截图[处理大小存入数据库] **/function saveImagecut(){	var zfId ='
    ';	var id = "
    ";	var data = new Object();	data.x = x == null ? 0 : x;	data.y = y == null ? 0 : y;	data.w = w == null ? 0 : w;	data.h = h == null ? 0 : h;	var s = data.w*data.h;	if(!s>0){		alert("请先裁剪照片，获取预览头像！");		return;	}	// 将已裁剪照片存进已裁剪表后刷新对应父页面的iframe框更新头像	$.ajax({		url : 'cardSaveImgToDbtb.action?id=' + id + '&zfId=' + zfId + '&r=' + new Date().getTime(),		data:data,		success : function(data){			var json = $.parseJSON(data);			if(json.msg == 'success'){				var ifm = window.opener.document.getElementById("cardListIframe_
    ");				var url = ifm.src;				ifm.src = url;				id = null;				$("#saveButton").attr("style","display:none;");				$("#cancelButton").attr("style","display:true;");				jcrop.disable();			}else{				alert(json.msg);			}		}	});	$('.preview-container').hide();	// window.close();}

四.java代码获取、处理、显示image图片流

1.从数据库中获取图片byte[]，保存在临时文件夹中。JSP的编辑图片、预览图片底图都是从临时文件夹获取而来。[这也是任何离开处理图片页面的操作都要严格执行删除文件的原因。清理脚手架]

2.从本页面获取剪裁的图片坐标传入处理图片的action。

3.在处理action中，结合编辑图片大小与获取的坐标值，对应成比例的截取临时文件夹中的图片。将新图片保存至数据库中。

4.在显示实际的已裁剪好的页面中，数据库取图片流显示的方式获取已裁剪之后的图片。

五。易错点

1.在图片的处理中容易将某个数据输入输出流忘记关闭，造成内存负载过重；

2.在样式中，我此前漏掉了一个严重的细节。jsp页面报js错误："auto"未定义。翻遍了页面中的js代码和所引入的.js文件，一无所获。事实证明，是一个.css文件中的auto没有完全注释掉。这里的两个启示是.css文件不能用//来注释。另外一点告诉我们，既然通过js代码能够极大的改观一向由.css文件控制的页面样式风格，那么css自己的不规范也能导致非常严重起初又毫不起眼的js错误。

3.截图框在ie6以上非常清晰漂亮，但是在ie6下边框带有几个累赘不整齐的“木头架子”非常丑陋，没有js错，就是丑。对此很无语，如果各位看到并且已经解决过请一定赐教。