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);//创建图片的文件流迭代器Iterator<ImageReader>it=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();}}}}
访问代码：
<%@pagelanguage=”java”import=”java.util.*,org.csg.upload.*”pageEncoding=”utf-8″%><%//图片的相对路径StringimagPath=request.getParameter(“imgPath”);StringrelPath=request.getRealPath(“http://1936625305.blog.51cto.com/”);//获取图片服务器绝对地址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(“<imgsrc=’images/”+newFileName+”‘/>”);}catch(Exceptione){e.printStackTrace();out.print(“图片裁剪失败”);}%>
jsp代码：
<%@pagelanguage=”java”import=”java.util.*”pageEncoding=”utf-8″%><!DOCTYPEHTMLPUBLIC”-//W3C//DTDHTML4.01Transitional//EN”><html><head><title>Jsp开发头像裁剪</title><metahttp-equiv=”pragma”content=”no-cache”><metahttp-equiv=”cache-control”content=”no-cache”><metahttp-equiv=”expires”content=”0″><metahttp-equiv=”keywords”content=”keyword1,keyword2,keyword3″><metahttp-equiv=”description”content=”Thisismypage”><linkrel=”stylesheet”href=”css/jquery.Jcrop.css”type=”text/css”/><scripttype=”text/javascript”src=”js/jquery.min.js”></script><scripttype=”text/javascript”src=”js/jquery.Jcrop.min.js”></script><styletype=”text/css”>*{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;}</style><scripttype=”text/javascript”>$(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’});}}});</script></head><body><h1>Java开发QQ头像裁剪系统</h1><divclass=”cut”><imgid=”cutImage”alt=””src=”images/1.jpg”><divid=”preview-pane”><divclass=”preview-container”><imgsrc=”images/1.jpg”class=”jcrop-preview”alt=”Preview”/></div></div></div><formaction=”success.jsp”method=”post”><inputtype=”text”value=”images/1.jpg”name=”imgPath”>x轴:<inputtype=”text”size=”4″id=”x1″name=”x”/>y轴:<inputtype=”text”size=”4″id=”y1″name=”y”/>宽度:<inputtype=”text”size=”4″id=”w”name=”w”/>高度:<inputtype=”text”size=”4″id=”h”name=”h”/><inputtype=”submit”value=”裁剪”/></form></body></html>
效果图：
望着它们，我睡着了。今天已经过去——我生命中所有天中的一天，
