Jquery中的Jcrop插件在图片剪裁中的使用

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

一.引用的JS和css

<script type="text/javascript" src="../jquery.min.js"></script>
<script type="text/javascript" src="../jcrop/js/jquery.Jcrop.js"></script>
<link rel="stylesheet" href="../jcrop/css/jquery.Jcrop.css" type="text/css"/>
<link rel="stylesheet" href="../css/imgcut.css" type="text/css" />

二.JSP页面中的html元素

编辑图片和预览图片

<div class="image-container" style="text-align:center;width:<%=maxEditWidth%>px;
height:<%=maxEditHeight%>px;overflow:hidden;">
  <img id="target" src="cardGetImgFroTem.action?id=<ww:property value='id'/>"  
	onload="setWandH(<%=maxEditWidth%>,<%=maxEditHeight%>)" />
</div>

<div class="preview-container hide" style="width:<%=maxCutWidth%>px;
height:<%=maxCutHeight%>px;overflow:hidden;">
<img id="preview" src="cardGetImgFroTem.action?id=<ww:property value='id'/>"  
onload="$('#preview').width(this.width);$('#preview').height(this.height)"/>
</div>

 三.页面中的js控制代码

/** 页面加载完即处理：
1.确定按钮绑定单击事件 
2.绑定页面事件：离开即删除临时文件
3.初始化截图框
**/
$(function(){
$('.btn-submit:first').click(function(){
	saveImagecut();
	return false;
});
	
/** 离开页面时删除临时文件 **/
$(window).unload(function(){
	var id = "<ww:property value='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 ='<ww:property value="zfId"/>';
	var id = "<ww:property value='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_<ww:property value='zfId'/>");
				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错，就是丑。对此很无语，如果各位看到并且已经解决过请一定赐教。