Java实现图片裁剪预览功能
在项目中,我们需要做些类似头像上传,图片裁剪的功能,ok看下面文章!
需要插件:jQueryJcrop
后端代码:
packageorg.csg.upload;
importjava.awt.Rectangle;
importjava.awt.image.BufferedImage;
importjava.io.File;
importjava.io.FileInputStream;
importjava.io.IOException;
importjava.util.Iterator;
importjavax.imageio.ImageIO;
importjavax.imageio.ImageReadParam;
importjavax.imageio.ImageReader;
importjavax.imageio.stream.ImageInputStream;
publicclassUpload{
/**
*@author小夜的传说
*@parampath1图片原路径
*@parampath2裁剪后存储的路径
*@paramxx轴
*@paramyy轴
*@paramw
*@paramh
*/
publicstaticvoidCutImage(Stringpath1,Stringpath2,intx,inty,intw,inth){
FileInputStreamfileInputStream=null;
ImageInputStreamiis=null;
try{
//读取图片文件,建立文件输入流
fileInputStream=newFileInputStream(path1);
//创建图片的文件流迭代器
Iteratorit=ImageIO.getImageReadersByFormatName("jpg");
ImageReaderreader=it.next();
//获取图片流建立文图文件流
iis=ImageIO.createImageInputStream(fileInputStream);
//获取图片默认参数
reader.setInput(iis,true);
ImageReadParamparam=reader.getDefaultReadParam();
//定义裁剪区域
Rectanglerect=newRectangle(x,y,w,h);
param.setSourceRegion(rect);
BufferedImagebi=reader.read(0,param);
ImageIO.write(bi,"jpg",newFile(path2));
}catch(Exceptione){
e.printStackTrace();
System.out.println("裁剪失败");
}finally{
try{
if(fileInputStream!=null){
fileInputStream.close();
}
if(iis!=null){
iis.close();
}
}catch(IOExceptione){
e.printStackTrace();
}
}
}
}
访问代码:
//图片的相对路径
StringimagPath=request.getParameter("imgPath");
StringrelPath=request.getRealPath("/");//获取图片服务器绝对地址
StringnewFileName=newDate().getTime()+".jpg";
//实际图片路径
Stringpath1=relPath+imagPath;
//裁剪后存储到服务器的图片路径
Stringpath2=relPath+"/images/"+newFileName;
intx=Integer.parseInt(request.getParameter("x"));
inty=Integer.parseInt(request.getParameter("y"));
intw=Integer.parseInt(request.getParameter("w"));
inth=Integer.parseInt(request.getParameter("h"));
try{
Upload.CutImage(path1,path2,x,y,w,h);
out.print("");
}catch(Exceptione){
e.printStackTrace();
out.print("图片裁剪失败");
}
%>
jsp代码:
HTMLPUBLIC"-//W3C//DTDHTML4.01Transitional//EN">
Jsp开发头像裁剪
*{margin:0;padding:0;}
.cut{
margin-top:20px;
}
#preview-pane{
display:block;
position:absolute;
z-index:2000;
top:10px;
right:-280px;
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:170px;
overflow:hidden;
}
$(function(){
varjcrop_api,
boundx="",
boundy="",
$preview=$('#preview-pane'),
$pcnt=$('#preview-pane.preview-container'),
$pimg=$('#preview-pane.preview-containerimg'),
xsize=$pcnt.width(),
ysize=$pcnt.height();
$('#cutImage').Jcrop({
onChange:showCoords,//获取选中的值
onSelect:showCoords,//获取拖拽的值
aspectRatio:xsize/ysize
},function(){
varbounds=this.getBounds();
boundx=bounds[0];
boundy=bounds[1];
jcrop_api=this;
$preview.appendTo(jcrop_api.ui.holder);
});
functionshowCoords(c){
varx=c.x;
vary=c.y;
varw=c.w;
varh=c.h;
$("#x1").val(parseInt(x));
$("#y1").val(parseInt(y));
$("#w").val(parseInt(w));
$("#h").val(parseInt(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'
});
}
}
});
Java开发QQ头像裁剪系统
x轴:
y轴:
宽度:
高度:
效果图: