码迷,mamicode.com
首页 > Web开发 > 详细

struts2+jsp+jquery+Jcrop实现图片裁剪并上传

时间:2014-09-04 18:40:59      阅读:284      评论:0      收藏:0      [点我收藏+]

标签:style   blog   color   os   io   使用   java   ar   for   

<1> 使用html标签上传需要裁剪的大图。
<2> 在页面呈现大图,使用Jcrop(Jquery)对大图进行裁剪,并且可以进行预览。
<3> 选择好截取部分之后发送数据给Action,在服务器端使用 Java API 对大图进行裁剪。
<4> 保存大图裁剪好的头像到指定目录,完成业务。

下面一步一步做:

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

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

[html] view plaincopy
<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配置文件
[html] view plaincopy
<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方法,该方法如下:

[java] view plaincopy
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/文件夹下。 然后访问页面,页面中就可以显示出刚刚上传的大图了。代码如下。


[html] view plaincopy
<div style="width: 500px; height: 500px;">  
    <img style="margin-top:20px;" src="../uploadpic/上传文件名称.jpg"/>" id="target"  />  
</div>  
第一步完成。


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


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



想要使用它,需要去官方网站下载该js,现给出一个地址:(附带jquery)


点击去往Jcrop插件下载页面


该插件使用比较简单:


<1> 在裁剪图片页面中,引入两个js文件,和1个Jcrop需要的css文件(Jcrop包中有,注意引入顺序,先引入jquery):
[html] view plaincopy
<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标签,一个用作裁剪后的预览,一个用作显示大图,代码如下:

[html] view plaincopy
预览:  
<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"  />  


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

[javascript] view plaincopy
<script type="text/javascript">  
        var x;  
    var y;  
    var width;  
    var height;  
    $(function(){  
        var jcrop_api, boundx, boundy;  
        <span style="color:#ff0000;">//使原图具有裁剪功能</span>  
        $(‘#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;  
        });  
        <span style="color:#ff0000;">//裁剪过程中,每改变裁剪大小执行该函数</span>  
        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‘  
                });  
                <span style="color:#ff0000;">$(‘#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坐标</span>  
            }  
          };  
    });  
  </script>  



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




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





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

[html] view plaincopy
<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,配置如下:

[html] view plaincopy
<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的一个实例对象,该类为裁剪图片类,代码如下:

[java] view plaincopy
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;   <span style="color:#ff0000;">(省略四个属性的get & set)</span>  
    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方法,代码如下:

[java] view plaincopy
public class UserAction extends BaseAction {  
    private OperateImage image;(省略get set)  
  
    private File pic; // 接收这个上传的文件  
    private String picFileName; // Struts2提供的格式,在文件名后+FileName就是上传文件的名字  
  
    /** 
     * 裁剪头像 
     */  
    public String cutPic(){  
<span style="color:#ff0000;">       String name = ServletActionContext.getServletContext().getRealPath("/uploadpic/原图名.jpg");  
        image.setSrcpath(name);  
        image.setSubpath(ServletActionContext.getServletContext().getRealPath("/uploadpic/裁剪目标图名.jpg"));  
        try {  
            image.cut(); //执行裁剪操作  执行完后即可生成目标图在对应文件夹内。</span>  
        } catch (IOException e) {  
            e.printStackTrace();  
        }  
        return "success";  
    }  
}  




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

  

struts2+jsp+jquery+Jcrop实现图片裁剪并上传

标签:style   blog   color   os   io   使用   java   ar   for   

原文地址:http://www.cnblogs.com/mgzy/p/3956572.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!