由于在Wb端，JavaScript不能直接处理本地文件，因此可以在后台裁剪图片，或者利用html5的canvas来处理。
方法1：传送到后台剪切
步骤1：上传图片到后台，向前端返回图片URL
利用input标签，将文件发送到后台。
inputid=imagtyp=filnam=imag/
可以使用jQury中的ajaxFilUpload方法
$.ajaxFilUpload(
{
url:liv/apply/uploadImag,//用于文件上传的服务器端请求地址
typ:post,
scururi:fals,
//一般设置为fals
filElmntId:imag,
//文件上传空间的id属性
dataTyp:json,
//返回值类型一般设置为json
data:data,
//可以传递图片属性及其他数据
succss:function(data,status)
//服务器成功响应处理函数
{
//上传传成功处理
},
rror:function(data,status,)
//服务器响应失败处理函数
{
//上传失败处理
}
步骤2：进行裁剪，获取图片的坐标及长宽等值，传回后台
这里一般是利用一个移动的div来获取剪截的动画效果，目前有多种jqury插件可以使用，本文使用的是Jcrop插件，比较简单方便。
$(#myPhoto).Jcrop({
onChang:showPrviw,
onSlct:showPrviw,
aspctRatio:1
});
functionshowPrviw(coords){
if(parsInt(coords.w){
//计算预览区域图片缩放的比例，通过计算显示区域的宽度(与高度)与剪裁的宽度(与高度)之比得到
varrx=$(#prviw_box).width()/coords.w;
varry=$(#prviw_box).hight()/coords.h;
//通过比例值控制图片的样式与显示
$(#crop_prviw).css({
width:Math.round(rx*$(#myPhoto).width())+px,
//预览图片宽度为计算比例值与原图片宽度的乘积
hight:Math.round(rx*$(#myPhoto).hight())+px,
//预览图片高度为计算比例值与原图片高度的乘积
marginLft:-+Math.round(rx*coords.x)+px,
marginTop:-+Math.round(ry*coords.y)+px
});
$(#X1).val(coords.x);
$(#Y1).val(coords.y);
$(#X2).val(coords.x2);
$(#Y2).val(coords.y2);
$(#W).val(coords.w);
$(#H).val(coords.h);
}
}
});
根据上述过程，可以将获取到的剪截横纵坐标和长宽数据发送到后台。
步骤3：后台裁剪图片
以java代码为例
/*
*图片裁剪通用接口
*src：图片位置，dst：图片保存位置
*若要覆盖原图片，只需src==dst即可
*/
publicstaticvoidcutImag(Stringsrc,Stringdst,intx,inty,intw,inth)throwsIOExcption{
FilsrcImg=nwFil(src);
//获取后缀名
Stringsuffix=srcImg.gtNam().substring(srcImg.gtNam().lastIndxOf(.)+1);
//根据不同的后缀获取图片读取器
Itratoritrator=ImagIO.gtImagRadrsBySuffix(suffix);
ImagRadrradr=(ImagRadr)itrator.nxt();
InputStramin=nwFilInputStram(src);
ImagInputStramiis=ImagIO.cratImagInputStram(in);
radr.stInput(iis,tru);
ImagRadParamparam=radr.gtDfaultRadParam();
//设置裁剪位置
Rctanglrct=nwRctangl(x,y,w,h);
param.stSourcRgion(rct);
//保存裁剪后的图片
BuffrdImagbi=radr.rad(0,param);
ImagIO.writ(bi,suffix,nwFil(dst));
}
方法2：Html5的canvas技术
这个需要浏览器支持以下几个点，并且兼容性还没有进行测试：
·FilAPI
·Blob
·canvas
步骤1：读取文件
如方法1一样，需要用input标签来获取fil，但是JavaScript不能直接操作文件，因此需要FilAPI来处理。
$(input[typ=fil]).chang(function(){
varfil=this.fils[0];
varradr=nwFilRadr();
radr.onload=function(){
//通过radr.rsult来访问生成的DataURL
varurl=radr.rsult;
stImagURL(url);
};
radr.radAsDataURL(fil);
});
varimag=nwImag();
functionstImagURL(url){
imag.src=url;
}
步骤2：获取裁剪坐标
参照方法1中的步骤2
步骤3：利用canvas重绘图片
首先要设置剪截后的图片大小相等的canvas。
//以下四个参数由步骤2获得
varx,y,width,hight;
varcanvas=$(canvaswidth=+width+hight=+hight+/canvas)[0],
ctx=canvas.gtContxt(2d);
ctx.drawImag(imag,x,y,width,hight,0,0,width,hight);
//重绘
$(documnt.body).appnd(canvas);
//添加到文档中可以查看效果
步骤4：保存图片
我们要获取canvas中图片的信息，需要用toDataURL转换成上面用到的DataURL。然后取出其中bas64信息，再用window.atob转换成由二进制字符串。但window.atob转换后的结果仍然是字符串，直接给Blob还是会出错。所以又要用Uint8Array转换一下。
vardata=canvas.toDataURL();
//dataURL的格式为“data:imag/png;bas64,****”,逗号之前都是一些说明性的文字，我们只需要逗号之后的就行了
data=data.split(,)[1];
data=window.atob(data);
varia=nwUint8Array(data.lngth);
for(vari=0;idata.lngth;i++){
ia[i]=data.charCodAt(i);
};
//canvas.toDataURL返回的默认格式就是imag/png
varblob=nwBlob([ia],{typ:imag/png});
步骤5：将blob数据发送至后台
在后台可以将Blob格式的数据转换成imag保存。