Jcrop+strut2+jsp实现图片剪切

在网上找，发现都是不全的，要么没获取图片路径，要么没后台等等，今天就来个全的

一：总体步骤

=》页面上传图片

=》获取上传图片剪切的四个值x,y,w,h

=》后天进行剪切

接下来就开始飞吧

页面上传图片，这个大家都懂的

 <form action="bookpicture.action" enctype="multipart/form-data" method="post">&nbsp;&nbsp;
                <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