Jcrop+strut2+jsp实现图片剪切
在网上找，发现都是不全的，要么没获取图片路径，要么没后台等等，今天就来个全的
一：总体步骤
=》页面上传图片
=》获取上传图片剪切的四个值x,y,w,h
=》后天进行剪切
接下来就开始飞吧
页面上传图片，这个大家都懂的
<form action="bookpicture.action" enctype="multipart/form-data" method="post">
<input type="file" name="picture" value="选择图片" />
<input type="submit" value="点击上传" />
</form>
先看看配置文件，这个应该也没问题的
<action name="bookpicture" class="com.ggxytxh.action.PictureAction" method="uploadPicture">
<!-- 动态设置Action的属性值 -->
<param name="path">/img/book_picture</param>
<!-- 配置Struts 2默认的视图页面 -->
<result name="bookpicture">/picture.jsp</result>
<result name="error">/fial.jsp</result>
</action>
上传后，后面的action处理，这些
/******************* 上传图片 *******************/ public String uploadPicture() { File file = new File(getPath(), pictureFileName); request.setAttribute("path", path.substring(1) + "/" + pictureFileName);// 页面读取，不知为啥，路径请前多多了“/” act.getSession().put("bookName", pictureFileName);//等下剪切还要用到名 try { FileUtils.copyFile(picture, file); if (!file.getParentFile().exists()) { file.getParentFile().mkdirs(); } FileUtils.copyFile(picture, file); } catch (IOException e) { return ERROR; } return "bookpicture"; }
接下来就是大招，开始剪切咯
导入jcrop,这个东西自己找下吧，有心的都会找到
<script src="./js/jquery-1.7.2.min.js" type="text/javascript"></script> <script src="./js/jquery.Jcrop.js" type="text/javascript"></script> <link rel="stylesheet" href="./css/jquery.Jcrop.css" type="text/css" />
接着就是剪切了，这里也有两个地方可能会有问题的，
<img onerror="this.style.display='none'"id="edit" src="${path}"/>这个路径，网上很多人都没说怎么获取，其实也很简单
就把它放到request中
request.setAttribute("path", path.substring(1) + "/" + pictureFileName);// 页面读取，不知为啥，路径请前多多了“/”
<div class="one"> <img onerror="this.style.display='none'" id="edit" src="${path}"/> </div> <div class="two" style="width: 150px;height: 200px;"> <img onerror="this.style.display='none'" id="preview" src="${path}"/> </div> <script type="text/javascript"> jQuery(function($) { // Create variables (in this scope) to hold the API and image size var jcrop_api, boundx, boundy; $('#edit').Jcrop({ onChange : updatePreview,//调用各个事件 onSelect : updatePreview, aspectRatio : 3/4//规定选择区域比例 }, function() { var bounds = this.getBounds(); boundx = bounds[0]; boundy = bounds[1]; jcrop_api = this; }); function updatePreview(c) { if (parseInt(c.w) > 0) { //计算预览区域图片缩放的比例，通过计算显示区域的宽度(与高度)与剪裁的宽度(与高度)之比得到 var rx = 150 / c.w;//rx=$('#preview').value/ c.w var ry = 200 / c.h; $('#preview').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', }); $('#width').val(c.w); //c.w 裁剪区域的宽 $('#height').val(c.h); //c.h 裁剪区域的高 $('#x').val(c.x); //c.x 裁剪区域左上角顶点相对于图片左上角顶点的x坐标 $('#y').val(c.y); //c.y 裁剪区域顶点的y坐标 } }; }); </script>
<div style="position:absolute;right:5px;bottom:5px;">
<form action="savePicture.action" method="post">
点击
<%-- <input type="hidden" name="pictureFileName" value="${pictureFileName}"> --%>
<input type="hidden" name="x" id="x"/>
<input type="hidden" name="y" id="y"/>
<input type="hidden" name="width" id="width"/>
<input type="hidden" name="height" id="height"/>
<input type="submit" value="确定" />
，设置完成。
</form>
</div>
再看看配置，也没什么的
<action name="savePicture" class="com.ggxytxh.action.PictureAction" method="cutPicture">
<result name="cutpicture">/addbook.jsp</result>
<result name="error">/fial.jsp</result>
</action>
到这里为止应该大家都会的
很多人就因为接下来的被卡住了
我也不例外
public class PictureAction extends ActionSupport { private File picture; private String pictureFileName; private String path;// 上传路径 private float x;//用了int的 private float y; private float width; private float height;
之前一直用int给四个值，一直出错，
问了很多人，都说路径错误，但是路径的确没错，他们没有给正确答案的我的，后来就把
<input type="hidden" name="x" id="x"/> 改了<input type="text" name="y" id="y"/>,发现数据是小数，突然醒悟
改为float就解决问题了
最后就是后台进行剪切啦
/******************* 剪切图片 *******************/ public String cutPicture() { String savePath;// 最终保存路径 String picName = null; Image img; ImageFilter cropFilter; //获取上传的文件名 pictureFileName=(String) act.getSession().get("bookName"); path = "D:\\Wed\\Tomcat 8.0\\webapps\\Library\\img\\book_picture\\"+ pictureFileName; File picFile=new File(path); try { // 读取源图像 BufferedImage bi = (BufferedImage)ImageIO.read(picFile); int srcWidth = bi.getWidth(); // 源图宽度 int srcHeight = bi.getHeight(); // 源图高度 //剪切 Image image = bi.getScaledInstance(srcWidth, srcHeight,Image.SCALE_DEFAULT); cropFilter = new CropImageFilter((int)x, (int)y, (int)width, (int)height); img = Toolkit.getDefaultToolkit().createImage(new FilteredImageSource(image.getSource(), cropFilter)); BufferedImage tag = new BufferedImage((int)width, (int)height,BufferedImage.TYPE_INT_RGB); Graphics g = tag.getGraphics(); g.drawImage(img, 0, 0, null); // 绘制缩小后的图 g.dispose(); // 产生图片前的文件夹 SimpleDateFormat formatter = new SimpleDateFormat("yyyyMMdd"); //设置保存保存路径 savePath = "D:\\img\\book_picture\\" + formatter.format(new Date()).toString(); File file = new File(savePath); if (!file.exists()) { file.mkdirs();// 多级目录，不能用mkdir() } //查找该路径下的最大文件名，i+1用于生产下一个文件名 if(file.list().length>0){ Arrays.sort(file.list()); picName=file.list()[file.list().length-1]; picName=String.valueOf((Integer.parseInt(picName.substring(0, picName.length()-4))+1)); System.out.println(picName); }else { picName=1+""; } // 整个路径包含文件名放在request中 request.setAttribute("bookpath", savePath+"\\"+picName+".jpg"); // 用于保存的图片，生成 ImageIO.write(tag, "JPEG", new File(savePath+"\\"+picName+".jpg")); //删除原来文件 picFile.delete(); //清除session act.getSession().remove("bookName"); } catch (IOException e) { e.printStackTrace(); return ERROR; }/* */ return "cutpicture";
本人菜鸟，大家共同学习学习，有不好地方求大神指点指点！
2015-05-09
