前端图像 裁剪利器 JQuerJjcrop+裁剪图像保存教程

第二步介绍jQueryJcrop基本用法

（一）使用方法

<linkrel="stylesheet"href="resources/jcrop/css/jquery.Jcrop.min.css"type="text/css"/>

<scriptsrc="resources/jcrop/js/jquery.min.js"></script>
<scriptsrc="resources/jcrop/js/jquery.Jcrop.min.js"></script>

<imgsrc="resources/fj.jpg"id="target"/>

$('#target').Jcrop({
　　//在这里添加所需要的参数
});

（二）参数说明

class="jcrop-holder"

class="jcrop-holdertest"

（三）API接口

第三步：前端页面中实际使用

　　　　
　　$(function(){
　　　　varjcrop_api,boundx,boundy,
//Grabsomeinformationaboutthepreviewpane
$preview=$('#preview-pane'),$pcnt=$('#preview-pane.preview-container'),$pimg=$('#preview-pane.preview-containerimg'),
xsize=$pcnt.width(),ysize=$pcnt.height();
console.log('init',[xsize,ysize]);
$('#target').Jcrop({
onChange:updatePreview,
onSelect:updatePreview,
aspectRatio:xsize/ysize//设为1则为正方形
},function(){
//UsetheAPItogettherealimagesize
varbounds=this.getBounds();
boundx=bounds[0];
boundy=bounds[1];
//StoretheAPIinthejcrop_apivariable
jcrop_api=this;

//Movethepreviewintothejcropcontainerforcsspositioning
$preview.appendTo(jcrop_api.ui.holder);
});
functionupdatePreview(c){
$('#x1').val(c.x);
$('#y1').val(c.y);
$('#x2').val(c.x2);
$('#y2').val(c.y2);
$('#w').val(c.w);
$('#h').val(c.h);
if(parseInt(c.w)>0){
varrx=xsize/c.w;
varry=ysize/c.h;
$pimg.css({
width:Math.round(rx*boundx)+'px',
height:Math.round(ry*boundy)+'px',
marginLeft:'-'+Math.round(rx*c.x)+'px',
marginTop:'-'+Math.round(ry*c.y)+'px'
});
}
}
});

//这个函数是用来与后端交互，进行上传图片。上传图片成功后，返回图片的url
functioncut(){
$.ajax({
type:"get",
url:"JCropServlet?t="+newDate(),
data:{
"x1":$('#x1').val(),
"x2":$('#x2').val(),
"y1":$('#y1').val(),
"y2":$('#y2').val()
},
dataType:"text",
success:function(data){
$("#result").css("display","block");
$("#result").attr("src","resources/"+data);
//location.reload();
},
error:function(data){
alert(data);
}
});
}

<!--原图片-->
<imgsrc="resources/fj.jpg"id="target"/>
<formid="coords"onSubmit="returnfalse;"method="get"action="JCropServlet">
<divclass="inline-labels">
<label>X1<inputtype="text"size="4"id="x1"name="x1"/></label>
　　　　　　<label>Y1<inputtype="text"size="4"id="y1"name="y1"/></label>
<label>X2<inputtype="text"size="4"id="x2"name="x2"/></label>
　<label>Y2<inputtype="text"size="4"id="y2"name="y2"/></label>
<label>W<inputtype="text"size="4"id="w"name="w"/></label>
<label>H<inputtype="text"size="4"id="h"name="h"/>
</label>
</div>
<buttononclick="cut()">提交</button>
</form>
　　//这个div是用来实时预览实时裁剪的图像
<divid="preview-pane">
<divclass="preview-container">
<imgsrc="resources/fj.jpg"class="jcrop-preview"alt="Preview"/>
</div>
</div>
<!--截图后的图片-->
<imgsrc=""id="result"style="display:none">

#preview-pane{
display:block;
position:absolute;
z-index:2000;
top:10px;
right:30px;
padding:6px;
border:1pxrgba(0,0,0,.4)solid;
background-color:white;
-webkit-border-radius:6px;
-moz-border-radius:6px;
border-radius:6px;
-webkit-box-shadow:1px1px5px2pxrgba(0,0,0,0.2);
-moz-box-shadow:1px1px5px2pxrgba(0,0,0,0.2);
box-shadow:1px1px5px2pxrgba(0,0,0,0.2);
}
#preview-pane.preview-container{
width:250px;
height:250px;
overflow:hidden;
}

第四步：后端接受图片，保存到本地。并通过返回图片url到前端页面。

publicclassJCropServletextendsHttpServlet{
publicJCropServlet(){
super();
}
publicvoiddoGet(HttpServletRequestrequest,HttpServletResponseresponse)
throwsServletException,IOException{
　　　　　//获取截取图片的坐标
intx1=Integer.parseInt(request.getParameter("x1"));
inty1=Integer.parseInt(request.getParameter("y1"));
intx2=Integer.parseInt(request.getParameter("x2"));
inty2=Integer.parseInt(request.getParameter("y2"));
//获取根路径
StringrootPath=request.getServletContext().getRealPath("/");
Stringsrc=rootPath+File.separator+"resources"+File.separator+"fj.jpg";
Stringname="fj_crop_"+this.dateFormat()+".jpg";
Stringdest=rootPath+File.separator+"resources"+File.separator+name;
ImageUtils.delete(rootPath+File.separator+"resources");
ImageUtils.cut(src,dest,x1,y1,x2,y2);

PrintWriterout=response.getWriter();
　　　　　//返回图片url
out.print(name);
out.close();
}
privateStringdateFormat(){
DateFormatdf=newSimpleDateFormat("yyyyMMddHHmmss");
returndf.format(newDate());
}
}