struts2 jsp jquery Jcrop实现图片裁剪和上传示例

今天有业务需要做用户头像，于是在网上找到了一个方法，可以剪出一个大图，做成自己大小的图片(基于Struts2)。郑重声明。

没有废话，具体步骤如下：

1使用html标签上传需要剪切的大图片。

2.渲染页面上的大图，使用Jcrop(Jquery)剪切大图，并预览。

3.选择截取的部分后，将数据发送到Action，使用Java API在服务器端剪出大图。

4.保存大图切头像到指定目录完成业务。

让我们一步一步来：

第一步：用html标签上传一个要剪切的大图片。

说白了，这一步就是用Struts2的FileUpload功能上传图片。具体代码如下：

Html页面：

表单id=' ulform '操作=' uploadpic。action ' enctype=' multipart/form-data '方法=' post ' input type=' file ' name=' pic ' id=' file ' value=' select picture '/input type=' submit ' value=' click to upload '/。

action name=' uploadPic ' class=' com . loo Xiao . tbms . user . action . UserAction ' method=' uploadPic ' result name=' success ' type=' redirect ' change pic . JSP/result result name=' error ' changepic.jsp/result/action根据配置点击提交按钮，表单将被提交，图片将以流的形式发送到user action的uploadPic方法，如下所示：

公共类用户操作{私有文件pic//(这里省略了get和set方法)私有String picFileName//(省略get和set方法，属性Struts2将自动分配为上传文件的文件名)public string uploadpic(){ string[]str={ '。jpg '，'。JPEG '，'。BMP '，'。gif ' }；//获取用户登录名TB user curr user=(TB user)get value(scope _ session，' curr user ')；//受限文件大小为4 mbif(pic==null | | pic . length()4194304){//文件太大；返回“错误”；} for(String s : str){ if(picfilename . endswith(s)){ String real path=servletactioncontext . getservletcontext()。getRealPath('/uploadpic ')；//在tomcat中保存图片的实际路径==' webroot/uploadpic/' file save file=new file(new file(real path)，' new file name . jpg ')；//实例化实际路径下的文件//确定父目录是否有if(！saveFile.getParentFile()。exists()){ SaveFile . GetParentFile()。mkdirs()；}尝试{//执行文件上传//FileUtils类名org.apache.com mons . io . FileUtils；//在commons-io包中，commons-fileupload必须依赖//commons-io包才能实现文件。上次，它实际上是将一个文件转换成流文件，用于读写fileutils.copyfile (pic，save file)。} catch(IOException e){ return ' imageError '；} } }返回“成功”；}}这样用户选择的图片就可以上传到tomcat的webRoot/uploadpic/文件夹中。然后访问页面，刚刚上传的大图就可以显示在页面上了。代码如下。

div style=' width: 500px' height: 500px'img style=' margin-top :20 px；'Src='http:/uploadpic/上传文件名. jpg/' id=' target ' alt=' '//div第一步完成。

第二步：用Jcrop插件剪出图片，在页面上预览。

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

该插件易于使用：

1.在裁剪图片页面中，介绍Jcrop需要的两个js文件和一个css文件(包含在Jcrop包中，注意介绍顺序，先介绍jquery):

脚本src='http:/js/jquery-1 . 8 . 3 . min . js ' type=' text/JavaScript '/script script src=' http :/js/jquery。jcrop . js ' type=' text/JavaScript '/Script link rel='样式表' href='./CSS/jquery。Jcrop.css' type=' text/CSS'/2按照Jcrop要求的格式在html页面中写入两个img标签，一个作为裁剪后的预览，另一个用于显示大图。代码如下：

预览：div style=' width:200px高度：200 px飞越：隐藏；'border:1px纯灰色；img id=' preview ' width=' 200px ' height=' 200px '/div原图：img src='http:/uploadpic/上传大图jpg' id='target' alt=''/3在该页面中写射流研究…代码，使其可以裁剪图片并且预览：

脚本类型=' text/JavaScript ' var x；var y；改变宽度；不同的高度；$(function(){ var jcrop_api，boundx，boundy//使原图具有裁剪功能$(“# target”).jcrop({ onchange : updatePreview，onSelect: updatePreview，aspectRatio: 1 }，function(){ //使用应用程序接口获取真实图像大小var界限=这个。getbounds()；boundx=界限[0];boundy=bounds[1]；//将应用程序接口存储在jcrop_api变量jcrop_api中=this })；//裁剪过程中，每改变裁剪大小执行该函数函数updatePreview(c){ if(Parseint(c . w)0){ $(' # Preview ').CSS({ width : Math。圆形(span style=' color : # ff 0000'200 /span/c.w * boundx) 'px '，span style=' color : # ff 0000 '/200为预览差异的宽和高/span高度： Math。圆形(span style=' color : # ff 0000'200 /span/c.h * boundy) 'px '，左边距： '-'数学。round(200/c . w * c . x)' px '，marginto p : '-' math。圆形(200/c . h * c . y)' px ' })；$('#width ').瓦尔(西经)；//c.w裁剪区域的宽$('#height ').瓦尔(约公元前300年)；//c.h裁剪区域的高$('#x ').val(c . x)；//c.x裁剪区域左上角顶点相对于图片左上角顶点的x坐标$('#y ').瓦尔(c . y)；//c.y裁剪区域顶点的y坐标} };});/script至此我们已经可以看到裁剪之后的样子了，并且也可以得到裁剪区域的x，y，高度，宽度属性。

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

一设置形式表单与隐藏域表单组件，并且在裁剪的时候对该四个组件的价值属性赋值

表单操作='cutPic.action '方法='post '点击输入类型='hidden' name='image.x' id='x'/输入类型='hidden' name='image.y' id='y'/输入类型='隐藏'名称='图像。width ' id=' width '/输入类型='隐藏'名称='图像。height ' id=' height '/输入类型='submit '值='确定'/,设置完成/表格2点击确定，提交该表单，访问行动，配置如下：

action name=' cutPic ' class=' com。卢晓。待定。用户。行动。用户操作'方法=' cutPic '结果name=' success ' type=' redirectAction './宣告/宣告_列表。行动/结果/行动3真相2带着四个参数访问UserAction，并且会自动给用户动作中的图像属性赋值，该图像属性为操作页面的一个实例对象，该类为裁剪图片类，代码如下：

package.com . loo Xiao . util；导入java.awt .矩形；导入Java . awt . image . bufferedimage；导入Java . io . file；导入Java . io . FileInputStream；导入Java . io . ioexception；导入Java . util . iterator；导入javax . imageio . imageio；导入javax . imageio . imagereadparam；导入javax . imageio . imagereader；导入javax . imageio . stream . imageinputstream；公共类OperateImage {//===源图片的路径名，如： c 3360 \ 1.jpg私有字符串srcpath//===剪切图片存储路径的名称，如： c 3360 \ 2.jpg私有字符串子路径；//===剪切点x坐标private int x；私有int y；//===切割点的宽度私有int宽度；私有int高度；public OperateImage() {} /**剪切图片并保存剪切的新图片*/public void cut()引发io异常{ file inputstream is=nullImageInputStream iis=null尝试{//读取图片文件为=new FileInputStream(src path)；/* *返回迭代器，其中包含所有当前注册的声称能够解码指定格式的ImageReader。*参数：format name包括非正式格式名(如‘JPEG’或‘tiff’)等。*/IteratorImageReader it=imageio . getimagereadersbyformatname(' jpg ')；ImageReader reader=it . next()；//获取图片流IIS=imageio . createimageinputstream(is)；/* * piis:读取来源。true:仅向前搜索/p .将其标记为“仅向前搜索”。*此设置意味着包含在输入源中的图像将仅被顺序读取，这可能允许读者避免缓存那些包含与先前读取的图像相关联的数据的输入部分。*/reader.setInput(iis，true)；/* * p描述如何解码流的类p .它用于指定如何在输入时在Java Image I/O *框架的上下文中从流中转换一个图像或一组图像。特定图像格式的插件将从其ImageReader实现的* getDefaultReadParam方法返回ImageReadParam的实例。*/ImageReadParam param=reader . getdefaultreadparam()；/* *图片剪辑区。矩形指定坐标空间中的一个区域，该区域可以由矩形对象*左上角顶点的坐标(x，y)、宽度和高度来定义。*/矩形矩形=新矩形(x，y，宽度，高度)；//提供一个BufferedImage作为解码像素数据的目标。param . setsourceregion(rect)；/* *使用提供的ImageReadParam读取由索引imageIndex指定的对象，并将其作为完整的* BufferedImage返回。*/bufferedmage bi=reader . read(0，param)；//保存新图片imageio.write (bi，' jpg '，新文件(子路径))；}最后{ if (is！=null)is . close()；if (iis！=null)IIS . close()；}}} 4在给这个类的实例的四个属性x、y、宽度和高度赋值后，访问cutPic方法，代码如下：

公共类UserAction扩展了baseAction { private OperateImage；(get set省略)私有文件pic//接收上传的文件私有字符串picFileNameStruts2提供的格式，FileName是上传文件后的文件名/* * * clip avatar */public string cut pic(){ string name=servletactioncontext . getservletcontext()。getrealpath('/uploadpic/原始图片名称. jpg ')；image.setSrcpath(名称)；image . setsubpath(servletactioncontext . getservletcontext()。getrealpath('/uploadpic/clipping目标图像名称. jpg ')；请尝试{ image . cut()；//执行裁剪操作后，可以在相应的文件夹中生成目标地图。} catch(IOException e){ e . printstacktrace()；}返回“成功”；}}第四步：将拍摄到的头像保存到特定文件夹中，裁剪过程完成。

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