springMVC结合Jcrop实现头像上传功能！头像上传以及之前预览再以及剪裁——javaweb版

来源：互联网发布：eclipse apache插件编辑：程序博客网时间：2024/05/06 23:41

项目中有上传头像功能,需要对上传的图片进行截取，原来使用的是Flash插件上传，但是不可控制。最后看到这个Jcrop组件还不错，就尝试用了一下感觉还不错的！这里分享给大家

先说明下我搭建的环境是:springMVC+spring+mybatis ，由于表达能力欠缺。下面直接上代码：

一、jsp页面：

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<form name="form" action="<%=request.getContextPath()%>/UploadDemo/uploadHeadImage" class="form-horizontal"
      method="post" enctype="multipart/form-data">
    <div class="modal-body text-center">
        <div class="zxx_main_con">
            <div class="zxx_test_list">
                <input class="photo-file" type="file" name="imgFile" id="fcupload" onchange="readURL(this);"/>
                <img alt="" src="" id="cutimg"/>
                <input type="hidden" id="x" name="x"/>
                <input type="hidden" id="y" name="y"/>
                <input type="hidden" id="w" name="w"/>
                <input type="hidden" id="h" name="h"/>
            </div>
        </div>
    </div>
     
    <div class="modal-footer">
        <button id="submit" onclick="">上传</button>
    </div>
</form>

二、jcrop组件引用情况：

?
1
2
3
    <link rel="stylesheet" href="<c:url value="/resources/uploadPlugin/css/jquery.Jcrop.css"/>" type="text/css"></link>
    <script type="text/javascript" src="<c:url value="/resources/uploadPlugin/scripts/jquery-1.8.3.js"/>"></script>
    <script type="text/javascript" src="<c:url value="/resources/uploadPlugin/scripts/jquery.Jcrop.js"/>"></script>

三、jcrop使用方法：（有两种，先说我使用的，最后在介绍两种方法的不同之处）

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<script type="text/javascript">
      //定义一个全局api，这样操作起来比较灵活
        var api = null;
        function readURL(input) {
            if (input.files && input.files[0]) {
                var reader = new FileReader();
                reader.readAsDataURL(input.files[0]);
                reader.onload = function (e) {
                    $('#cutimg').removeAttr('src');
                    $('#cutimg').attr('src', e.target.result);
                    api = $.Jcrop('#cutimg', {
                        setSelect: [ 20, 20, 200, 200 ],
                        aspectRatio: 1,
                        onSelect: updateCoords
                    });
                };
                if (api != undefined) {
                    api.destroy();
                }
            }
            function updateCoords(obj) {
                $("#x").val(obj.x);
                $("#y").val(obj.y);
                $("#w").val(obj.w);
                $("#h").val(obj.h);
            };
        }
    </script>

四、后台代码：

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
    @RequestMapping(value = "/uploadHeadImage")
    public String uploadHeadImage(
            HttpServletRequest request,
            @RequestParam(value = "x") String x,
            @RequestParam(value = "y") String y,
            @RequestParam(value = "h") String h,
            @RequestParam(value = "w") String w,
            @RequestParam(value = "imgFile") MultipartFile imageFile
    ) throws Exception{
        System.out.println("==========Start=============");
        String realPath = request.getSession().getServletContext().getRealPath("/");
        String resourcePath = "resources/uploadImages/";
        if(imageFile!=null){
            if(FileUploadUtil.allowUpload(imageFile.getContentType())){
                String fileName = FileUploadUtil.rename(imageFile.getOriginalFilename());
                int end = fileName.lastIndexOf(".");
                String saveName = fileName.substring(0,end);
                File dir = new File(realPath + resourcePath);
                if(!dir.exists()){
                    dir.mkdirs();
                }
                File file = new File(dir,saveName+"_src.jpg");
                imageFile.transferTo(file);
                String srcImagePath = realPath + resourcePath + saveName;
                int imageX = Integer.parseInt(x);
                int imageY = Integer.parseInt(y);
                int imageH = Integer.parseInt(h);
                int imageW = Integer.parseInt(w);
                //这里开始截取操作
                System.out.println("==========imageCutStart=============");
                ImageCut.imgCut(srcImagePath,imageX,imageY,imageW,imageH);
                System.out.println("==========imageCutEnd=============");
            }
        }
        return "user/uploadImg/test";
    }

五、ImageCut.java工具类：

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
/**
     * 截取图片
     * @param srcImageFile  原图片地址
     * @param x    截取时的x坐标
     * @param y    截取时的y坐标
     * @param desWidth   截取的宽度
     * @param desHeight   截取的高度
     */
    public static void imgCut(String srcImageFile, int x, int y, int desWidth,
                              int desHeight) {
        try {
            Image img;
            ImageFilter cropFilter;
            BufferedImage bi = ImageIO.read(new File(srcImageFile+"_src.jpg"));
            int srcWidth = bi.getWidth();
            int srcHeight = bi.getHeight();
            if (srcWidth >= desWidth && srcHeight >= desHeight) {
                Image image = bi.getScaledInstance(srcWidth, srcHeight,Image.SCALE_DEFAULT);
                cropFilter = new CropImageFilter(x, y, desWidth, desHeight);
                img = Toolkit.getDefaultToolkit().createImage(
                        new FilteredImageSource(image.getSource(), cropFilter));
                BufferedImage tag = new BufferedImage(desWidth, desHeight,
                        BufferedImage.TYPE_INT_RGB);
                Graphics g = tag.getGraphics();
                g.drawImage(img, 0, 0, null);
                g.dispose();
                //输出文件
                ImageIO.write(tag, "JPEG", new File(srcImageFile+"_cut.jpg"));
            }
        } catch (Exception e) {
            e.printStackTrace();
        }
    }

六、jcrop的两种使用方式：

1、jQuery('#cropbox').Jcrop({
                onChange: showCoords,
                onSelect: showCoords
           });

2、var api = $.Jcrop('#cropbox',{
                onChange: showPreview,
                onSelect: showPreview,
                aspectRatio: 1
           });

这里推荐大家使用第二种方式，将Jcrop生成的对象赋给一个全局变量，这样操作起来更灵活，如调用api.destroy();方法可以销毁 Jcorp，这样我们在实际使用中会更灵活一些，因为直接改变要裁剪图片的路径会导致Jcorp的出错，如果想要变更编辑的图片我们需要销毁Jcorp，变更图片的属性后再次为图片附加Jcorp。

参看：1、 jQuery Jcrop 图像裁剪 2、Jcrop的官网

1 0