今天有业务需要制作用户头像的需求,在网上找了个可以裁剪大图制作自己希望大小的图片的方法(基于Struts2)。特此记录一下。
不废话,具体的步骤如下:
<1> 使用html标签上传需要裁剪的大图。
<2> 在页面呈现大图,使用Jcrop(Jquery)对大图进行裁剪,并且可以进行预览。
<3> 选择好截取部分之后发送数据给Action,在服务器端使用 Java API 对大图进行裁剪。
<4> 保存大图裁剪好的头像到指定目录,完成业务。
下面一步一步做:
第一步:使用html标签上传需要裁剪的大图。
这一步说白了也就是使用Struts2自带的FileUpload功能,把图片进行上传具体代码如下:
html页面:
Struts2配置文件
changePic.jsp changePic.jsp
根据配置点击提交按钮,会提交表单,把图片以流的形式发送给 UserAction的uploadPic方法,该方法如下:
public class UserAction{ private File pic; //(在此省略 get 和 set 方法) private String picFileName; //(省略get和set方法, 该属性Struts2会自动赋值为上传文件的文件名) public String uploadPic() { String[] str = { ".jpg", ".jpeg", ".bmp", ".gif" }; // 获取用户登录名 TbUser curruser = (TbUser) getValue(SCOPE_SESSION, "curruser"); // 限定文件大小是4MB if (pic == null || pic.length() > 4194304) { //文件过大 return "error"; } for (String s : str) { if (picFileName.endsWith(s)) { String realPath = ServletActionContext.getServletContext().getRealPath("/uploadpic");// 在tomcat中保存图片的实际路径 == "webRoot/uploadpic/" File saveFile = new File(new File(realPath), "新文件名.jpg"); // 在该实际路径下实例化一个文件 // 判断父目录是否存在 if (!saveFile.getParentFile().exists()) { saveFile.getParentFile().mkdirs(); } try { // 执行文件上传 // FileUtils 类名 org.apache.commons.io.FileUtils; // 是commons-io包中的,commons-fileupload 必须依赖 // commons-io包实现文件上次,实际上就是将一个文件转换成流文件进行读写 FileUtils.copyFile(pic, saveFile); } catch (IOException e) { return "imageError"; } } } return "success"; } }
这样就可以把用户选择的图片上传到tomcat的webRoot/uploadpic/文件夹下。 然后访问页面,页面中就可以显示出刚刚上传的大图了。代码如下。
" id="target" alt="" />
第一步完成。
第二步:使用Jcrop插件裁剪该图片,并且在页面中预览。
Jcrop是一个基于JQuery的成熟的图片裁剪的插件。如图:
该插件使用比较简单:
<1> 在裁剪图片页面中,引入两个js文件,和1个Jcrop需要的css文件(Jcrop包中有,注意引入顺序,先引入jquery):
<2> 在html页面中按照Jcrop要求的格式编写两个img标签,一个用作裁剪后的预览,一个用作显示大图,代码如下:
预览:原图:
<3> 在该页面中写js代码,使其可以裁剪图片并且预览:
至此我们已经可以看到裁剪之后的样子了,并且也可以得到裁剪区域的x,y,height,width属性。
第三步:把截取的该区域的属性传递给action,让action根据所得属性,利用javaAPI把原图裁剪成小图。
<1> 设置form表单与隐藏域表单组件,并且在裁剪的时候对该四个组件的value属性赋值
<2> 点击确定,提交该表单,访问action,配置如下:
../announcement/announcement_list.action
<3>Struts2带着四个参数访问UserAction,并且会自动给UserAction中的image属性赋值,该image属性为OperateImage的一个实例对象,该类为裁剪图片类,代码如下:
package com.luoxiao.util; import java.awt.Rectangle; import java.awt.image.BufferedImage; import java.io.File; import java.io.FileInputStream; import java.io.IOException; import java.util.Iterator; import javax.imageio.ImageIO; import javax.imageio.ImageReadParam; import javax.imageio.ImageReader; import javax.imageio.stream.ImageInputStream; public class OperateImage { // ===源图片路径名称如:c:\1.jpg private String srcpath; // ===剪切图片存放路径名称.如:c:\2.jpg private String subpath; // ===剪切点x坐标 private int x; private int y; // ===剪切点宽度 private int width; private int height; public OperateImage() { } /** 对图片裁剪,并把裁剪完的新图片保存 */ public void cut() throws IOException { FileInputStream is = null; ImageInputStream iis = null; try { // 读取图片文件 is = new FileInputStream(srcpath); /* * 返回包含所有当前已注册 ImageReader 的 Iterator,这些 ImageReader 声称能够解码指定格式。 * 参数:formatName - 包含非正式格式名称 . (例如 "jpeg" 或 "tiff")等 。 */ Iteratorit = ImageIO.getImageReadersByFormatName("jpg"); ImageReader reader = it.next(); // 获取图片流 iis = ImageIO.createImageInputStream(is); /* * iis:读取源.true:只向前搜索
.将它标记为 ‘只向前搜索'。 * 此设置意味着包含在输入源中的图像将只按顺序读取,可能允许 reader 避免缓存包含与以前已经读取的图像关联的数据的那些输入部分。 */ reader.setInput(iis, true); /* *描述如何对流进行解码的类
.用于指定如何在输入时从 Java Image I/O * 框架的上下文中的流转换一幅图像或一组图像。用于特定图像格式的插件 将从其 ImageReader 实现的 * getDefaultReadParam 方法中返回 ImageReadParam 的实例。 */ ImageReadParam param = reader.getDefaultReadParam(); /* * 图片裁剪区域。Rectangle 指定了坐标空间中的一个区域,通过 Rectangle 对象 * 的左上顶点的坐标(x,y)、宽度和高度可以定义这个区域。 */ Rectangle rect = new Rectangle(x, y, width, height); // 提供一个 BufferedImage,将其用作解码像素数据的目标。 param.setSourceRegion(rect); /* * 使用所提供的 ImageReadParam 读取通过索引 imageIndex 指定的对象,并将 它作为一个完整的 * BufferedImage 返回。 */ BufferedImage bi = reader.read(0, param); // 保存新图片 ImageIO.write(bi, "jpg", new File(subpath)); } finally { if (is != null) is.close(); if (iis != null) iis.close(); } } }
<4> 给该类的实例的四个属性 x,y,width,height赋值之后,访问action中的cutPic方法,代码如下:
public class UserAction extends BaseAction { private OperateImage image;(省略get set) private File pic; // 接收这个上传的文件 private String picFileName; // Struts2提供的格式,在文件名后+FileName就是上传文件的名字 /** * 裁剪头像 */ public String cutPic(){ String name = ServletActionContext.getServletContext().getRealPath("/uploadpic/原图名.jpg"); image.setSrcpath(name); image.setSubpath(ServletActionContext.getServletContext().getRealPath("/uploadpic/裁剪目标图名.jpg")); try { image.cut(); //执行裁剪操作 执行完后即可生成目标图在对应文件夹内。 } catch (IOException e) { e.printStackTrace(); } return "success"; } }
第四步:把截取好的头像保存在具体文件夹下即可,裁剪过程完成。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。