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错，就是丑。对此很无语，如果各位看到并且已经解决过请一定赐教。