今天有业务需要制作用户头像的需求，在网上找了个可以裁剪大图制作自己希望大小的图片的方法（基于Struts2）。特此记录一下。

不废话，具体的步骤如下：

<1> 使用html标签上传需要裁剪的大图。

<2> 在页面呈现大图，使用Jcrop（Jquery）对大图进行裁剪，并且可以进行预览。

<3> 选择好截取部分之后发送数据给Action，在服务器端使用 Java API 对大图进行裁剪。

<4> 保存大图裁剪好的头像到指定目录，完成业务。

下面一步一步做：

第一步：使用html标签上传需要裁剪的大图。

这一步说白了也就是使用Struts2自带的FileUpload功能，把图片进行上传具体代码如下：

html页面：

<form id="ulform" action="uploadPic.action" enctype="multipart/form-data" method="post"> 
 <input type="file" name="pic" id="file" value="选择图片" /> 
 <input type="submit" value="点击上传" /> 
</form> 

Struts2配置文件

<action name="uploadPic" class="com.luoxiao.tbms.user.action.UserAction" method="uploadPic"> 
 <result name="success" type="redirect">changePic.jsp</result> 
 <result name="error">changePic.jsp</result> 
</action> 

根据配置点击提交按钮，会提交表单，把图片以流的形式发送给 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/文件夹下。 然后访问页面，页面中就可以显示出刚刚上传的大图了。代码如下。

<div style="width: 500px; height: 500px;"> 
 <img style="margin-top:20px;" src="../uploadpic/上传文件名称.jpg"/>" id="target" alt="" /> 
</div> 

第一步完成。

第二步：使用Jcrop插件裁剪该图片，并且在页面中预览。

Jcrop是一个基于JQuery的成熟的图片裁剪的插件。如图：

该插件使用比较简单：

<1> 在裁剪图片页面中，引入两个js文件，和1个Jcrop需要的css文件(Jcrop包中有，注意引入顺序，先引入jquery)：

<script src="../js/jquery-1.8.3.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" /> 

<2> 在html页面中按照Jcrop要求的格式编写两个img标签，一个用作裁剪后的预览，一个用作显示大图，代码如下：

预览： 
<div style="width:200px;height:200px;overflow:hidden; border:1px solid gray;"> 
 <img id="preview" width="200px" height="200px" /> 
</div>  
原图： 
 <img src="../uploadpic/上传大图.jpg" id="target" alt="" /> 

<3> 在该页面中写js代码，使其可以裁剪图片并且预览：

<script type="text/javascript"> 
  var x; 
 var y; 
 var width; 
 var height; 
 $(function(){ 
  var jcrop_api, boundx, boundy; 
  //使原图具有裁剪功能 
  $('#target').Jcrop({ 
   onChange: updatePreview, 
   onSelect: updatePreview, 
   aspectRatio: 1 
  },function(){ 
   // Use the API to get the real image size 
   var bounds = this.getBounds(); 
   boundx = bounds[0]; 
   boundy = bounds[1]; 
   // Store the API in the jcrop_api variable 
   jcrop_api = this; 
  }); 
  //裁剪过程中，每改变裁剪大小执行该函数 
  function updatePreview(c){ 
   if (parseInt(c.w) > 0){ 
    $('#preview').css({ 
     width: Math.round(<span style="color:#ff0000;">200 </span>/ c.w * boundx) + 'px', <span style="color:#ff0000;">//200 为预览div的宽和高</span> 
     height: Math.round(<span style="color:#ff0000;">200 </span>/ c.h * boundy) + 'px', 
     marginLeft: '-' + Math.round(200 / c.w * c.x) + 'px', 
     marginTop: '-' + Math.round(200 / c.h * 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> 

至此我们已经可以看到裁剪之后的样子了，并且也可以得到裁剪区域的x，y，height，width属性。

第三步：把截取的该区域的属性传递给action，让action根据所得属性，利用javaAPI把原图裁剪成小图。

<1> 设置form表单与隐藏域表单组件，并且在裁剪的时候对该四个组件的value属性赋值

<form action="cutPic.action" method="post"> 
 点击 
 <input type="hidden" name="image.x" id="x"/> 
 <input type="hidden" name="image.y" id="y"/> 
 <input type="hidden" name="image.width" id="width"/> 
 <input type="hidden" name="image.height" id="height"/> 
 <input type="submit" value="确定" /> 
 ，设置完成。 
</form> 

<2> 点击确定，提交该表单，访问action，配置如下：

<action name="cutPic" class="com.luoxiao.tbms.user.action.UserAction" method="cutPic"> 
 <result name="success" type="redirectAction">../announcement/announcement_list.action</result> 
</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"）等 。 
    */ 
   Iterator<ImageReader> it = ImageIO.getImageReadersByFormatName("jpg"); 
   ImageReader reader = it.next(); 
   // 获取图片流 
   iis = ImageIO.createImageInputStream(is); 
   /* 
    * <p>iis:读取源.true:只向前搜索 </p>.将它标记为 ‘只向前搜索'。 
    * 此设置意味着包含在输入源中的图像将只按顺序读取，可能允许 reader 避免缓存包含与以前已经读取的图像关联的数据的那些输入部分。 
    */ 
   reader.setInput(iis, true); 
   /* 
    * <p>描述如何对流进行解码的类<p>.用于指定如何在输入时从 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"; 
 } 
} 

第四步：把截取好的头像保存在具体文件夹下即可,裁剪过程完成。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

# java  # jcrop  # 图片裁剪  # 裁剪后上传  # jcrop图片裁剪  # jQuery插件ImgAreaSelect实现头像上传预览和裁剪功能实例讲解一  # 利用jQuery插件imgAreaSelect实现图片上传裁剪（同步显示图像位置信息）  # 利用jQuery插件imgAreaSelect实现图片上传裁剪（放大缩小）  # jquery.Jcrop结合JAVA后台实现图片裁剪上传实例  # jQuery实现图片上传和裁剪插件Croppie  # jQuery插件jcrop+Fileapi完美实现图片上传+裁剪+预览的代码分享  # jQuery+PHP实现上传裁剪图片  # 上传  # 表单  # 上传文件  # 是一个  # 带着  # 在此  # 中有  # 将其  # 并将  # 可以看到  # 找了  # 使其  # 作为一个  # 一幅  # 如图  # 将它  # 自带  # 所提供  # 过大  # 提供一个 

相关栏目： 【 网站优化151355 】 【 网络推广146373 】 【 网络技术251813 】 【 AI营销90571 】

相关推荐： Laravel如何使用Service Provider服务提供者_Laravel依赖注入与容器绑定【深度】  Linux网络带宽限制_tc配置实践解析【教程】  网站制作免费,什么网站能看正片电影？  东莞市网站制作公司有哪些,东莞找工作用什么网站好？  移动端手机网站制作软件,掌上时代，移动端网站的谷歌SEO该如何做？  微信h5制作网站有哪些,免费微信H5页面制作工具？  rsync同步时出现rsync: failed to set times on “xxxx”: Operation not permitted  如何在阿里云完成域名注册与建站？  详解一款开源免费的.NET文档操作组件DocX（.NET组件介绍之一）  动图在线制作网站有哪些,滑动动图图集怎么做？  Laravel Artisan命令怎么自定义_创建自己的Laravel命令行工具完全指南  如何在 React 中条件性地遍历数组并渲染元素  Laravel如何设置定时任务（Cron Job）_Laravel调度器与任务计划配置  绝密ChatGPT指令：手把手教你生成HR无法拒绝的求职信  jquery插件bootstrapValidator表单验证详解  厦门模型网站设计制作公司,厦门航空飞机模型掉色怎么办？  家族网站制作贴纸教程视频,用豆子做粘帖画怎么制作？  Laravel如何生成和使用数据填充？（Seeder和Factory示例）  桂林网站制作公司有哪些,桂林马拉松怎么报名？  标题：Vue + Vuex 项目中正确使用 JWT 进行身份认证的实践指南  香港服务器建站指南：免备案优势与SEO优化技巧全解析  C#如何调用原生C++ COM对象详解  公司网站制作价格怎么算,公司办个官网需要多少钱？  三星、SK海力士获美批准：可向中国出口芯片制造设备  INTERNET浏览器怎样恢复关闭标签页_INTERNET浏览器标签恢复快捷键与方法【指南】  Laravel如何正确地在控制器和模型之间分配逻辑_Laravel代码职责分离与架构建议  Win10如何卸载预装Edge扩展_Win10卸载Edge扩展教程【方法】  Laravel怎么使用Collection集合方法_Laravel数组操作高级函数pluck与map【手册】  创业网站制作流程,创业网站可靠吗？  Python自然语言搜索引擎项目教程_倒排索引查询优化案例  Laravel Eloquent关联是什么_Laravel模型一对一与一对多关系精讲  Laravel Session怎么存储_Laravel Session驱动配置详解  Laravel请求验证怎么写_Laravel Validator自定义表单验证规则教程  如何登录建站主机？访问步骤全解析  python中快速进行多个字符替换的方法小结  Win11搜索不到蓝牙耳机怎么办 Win11蓝牙驱动更新修复【详解】  Laravel如何使用软删除（Soft Deletes）功能_Eloquent软删除与数据恢复方法  免费制作统计图的网站有哪些,如何看待现如今年轻人买房难的情况？  千问怎样用提示词获取健康建议_千问健康类提示词注意事项【指南】  Laravel Blade模板引擎语法_Laravel Blade布局继承用法  如何彻底卸载建站之星软件？  如何快速查询网站的真实建站时间？  如何正确选择百度移动适配建站域名？  iOS发送验证码倒计时应用  Laravel如何实现邮箱地址验证功能_Laravel邮件验证流程与配置  怎么制作网站设计模板图片,有电商商品详情页面的免费模板素材网站推荐吗？  宙斯浏览器视频悬浮窗怎么开启 边看视频边操作其他应用教程  Windows Hello人脸识别突然无法使用  如何在IIS7上新建站点并设置安全权限？  Laravel项目结构怎么组织_大型Laravel应用的最佳目录结构实践