使用jcrop裁剪图片

项目需要做一个头像截取的功能，类似于QQ头像截取功能。在网上搜了下，最后使用jQuery插件jcrop来截取，
在后台来进行图片切割。
头像截取的原理：在前台使用jcrop获取切面的x轴坐标、y轴坐标、切面高度、切面宽度，然后将这四个值传给后台。在后台要进行放大处理：将切面放大N倍，
N=原图/前台展示的头像。
即X = X*原图宽/前图宽，
Y = Y*原图高/前 图高，
W = W*原图宽/前图宽,
H = H*原图高/前图高。
根据上一篇博客的知识，完成了项目中头像裁剪上传的功能

<link rel="stylesheet" href="css/jquery.Jcrop.css">

<script src="js/jquery.js"></script>    <script src="js/jquery.Jcrop.js"></script>  

<div style="padding-left: 120px">            <img             <c:choose>                 <c:when test="${!empty sessionScope.com_crm_auth_entity_Admin.photo }">                  src="<%=request.getContextPath()%>/resources/uploadImages/${sessionScope.com_crm_auth_entity_Admin.photo}"                 </c:when>                 <c:otherwise>src="<%=basePath %>static/img/user.png"</c:otherwise>            </c:choose>             id="userImg"   height="80"  style="background-color: #fff;  border: 1px solid #ddd;  border-radius: 4px;               -webkit-transition: all .2s ease-in-out;       -o-transition: all .2s ease-in-out;          transition: all .2s ease-in-out;"             title="点击更换头像" style="cursor: pointer;" onclick="changeImg(1);"/>          </div>

<!-- 修改头像开始  -->        <div class="jc-demo-box" id="cPhoto" style="display: none;margin-left: 20px;">            <form name="form" class="form-inline" role="form" id="cpFrom"                action="<%=request.getContextPath()%>/uploadImg/uploadHeadImage"                 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=""                                 <c:choose>                                <c:when test="${!empty sessionScope.com_crm_auth_entity_Admin.photo }">                                src="<%=request.getContextPath()%>/resources/uploadImages/${sessionScope.com_crm_auth_entity_Admin.photo}"                                </c:when>                                 <c:otherwise>src="<%=basePath %>static/img/user.png"</c:otherwise>                                </c:choose>                                id="cutimg" width="400px" height="270px"/>                            <input type="hidden" id="uid" name="uid"  value="${sessionScope.com_crm_auth_entity_Admin.id}"/>                            <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 id="preview-pane">                    <div class="preview-container">                        <img src="" class="jcrop-preview" >                    </div>                </div>                <div class="modal-footer">                    <button type="button" class="btn btn-info" onclick="uploadImg();">上传</button>                    <button type="button"  class="btn btn-warning" onclick="changeImg();">关闭</button>                </div>            </form>        </div>        <!-- 修改头像结束  -->

<script type="text/javascript">        //定义一个全局api，这样操作起来比较灵活        var api = null,         boundx,         boundy,         $preview = $('#preview-pane'),         $pcnt = $('#preview-pane .preview-container'),         $pimg = $('#preview-pane .preview-container img'),        xsize = $pcnt.width(),         ysize = $pcnt.height();        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);                    $pimg.removeAttr('src');                    $pimg.attr('src', e.target.result);                    api = $.Jcrop('#cutimg', {                        setSelect: [ 20, 20, 200, 200 ],                        aspectRatio: 1,                        onSelect: updateCoords,                        onChange:updateCoords                    });                    /* getBounds()  获取图片实际尺寸，格式为：[w,h]                    getWidgetSize() 获取图片显示尺寸，格式为：[w,h]                    getScaleFactor()    获取图片缩放的比例，格式为：[w,h] */                    var bounds = api.getBounds();                    boundx = bounds[0];                    boundy = bounds[1];                    $preview.appendTo(api.ui.holder);                    var obj={};                    obj.x=20;obj.y=20;obj.w=180,obj.h=180;obj.x2=200;obj.y2=200;                    updateCoords(obj);                };/*                 if (api != undefined) {   //打开这段代码的话就只能截取一次                    api.destroy();                } */            }            function updateCoords(obj) {                $("#x").val(obj.x);                $("#y").val(obj.y);                $("#w").val(obj.w);                $("#h").val(obj.h);                if (parseInt(obj.w) > 0) {                    var rx = xsize / obj.w;                    var ry = ysize / obj.h;                    $pimg.css({                        width : Math.round(rx * boundx) + 'px',                        height : Math.round(ry * boundy) + 'px',                        marginLeft : '-' + Math.round(rx * obj.x) + 'px',                        marginTop : '-' + Math.round(ry * obj.y) + 'px'                    });                }            }            ;        }        function changeImg(sign){            if(sign==1){                $("#cPhoto").show();            }else{                $("#cPhoto").hide();            }        }        function uploadImg(){            var imageFile=$("#fcupload").val();            var x=$("#x").val();            var y=$("#y").val();            var w=$("#w").val();            var h=$("#h").val();            if (imageFile == null || imageFile == undefined || imageFile == '') {                 alert("请选择一张图片再上传！");            } else{                $("#cpFrom").submit();            }        }    </script>

后台处理图片，并上传

package com.crm.common.controller;@Controller @RequestMapping("/uploadImg")public class UploadImgController {    @Autowired    private AdminService adminService;    @RequestMapping(value = "/uploadHeadImage",method = RequestMethod.POST)    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 = "uid") String id,            @RequestParam(value = "imgFile") MultipartFile imageFile    ) {        try {            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=============");                    String imgCut = ImgCut.imgCut(srcImagePath,imageX,imageY,imageW,imageH);                    System.out.println("==========imageCutEnd============="+imgCut);                    Map<String, String> map=new HashMap<String, String>();                    map.put("id", id);                    map.put("photo", imgCut);                    int updateId = adminService.updatePhoto(map);                    if(updateId>0){                        Admin admin = adminService.selectByUid(updateId);                        //将用户信息存入session                        request.getSession().removeAttribute(WebKeys.ADMINUSER_KEY);                        request.getSession().setAttribute(WebKeys.ADMINUSER_KEY, admin);                    }                                   }            }        } catch (Exception e) {        }        return "common/changePhoto";    }}

裁剪工具类

import java.awt.Graphics;import java.awt.Image;import java.awt.Toolkit;import java.awt.image.BufferedImage;import java.awt.image.CropImageFilter;import java.awt.image.FilteredImageSource;import java.awt.image.ImageFilter;import java.io.File;import java.io.IOException;import javax.imageio.ImageIO;public class ImgCut {    /**     *      * 截取图片     *      * @param srcImageFile     *            原图片地址     * @param x     *            截取时的x坐标     * @param y     *            截取时的y坐标     * @param desWidth     *            截取的宽度     * @param desHeight     *            截取的高度     * @return desImageName 截取之后的图片的名字     * @throws IOException     */    public static String imgCut(String srcImageFile, int x, int y, int desWidth,            int desHeight) throws IOException {        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);            //将图片按照一定比例显示出来，但是传递到后台的时候需要经历一个比例换算   此处的400和270与前台设定的一致            int x1 = x*srcWidth/400;            int y1 = y*srcHeight/270;            int w1 = desWidth*srcWidth/400;            int h1 = desHeight*srcHeight/270;            cropFilter = new CropImageFilter(x1, y1, w1, h1);            img = Toolkit.getDefaultToolkit().createImage(                    new FilteredImageSource(image.getSource(), cropFilter));//          BufferedImage tag = new BufferedImage(desWidth, desHeight,//                  BufferedImage.TYPE_INT_RGB);            BufferedImage tag = new BufferedImage(w1, h1,BufferedImage.TYPE_INT_RGB);            Graphics g = tag.getGraphics();            g.drawImage(img, 0, 0, null);            g.dispose();            // 输出文件            ImageIO.write(tag, "JPEG", new File(srcImageFile + "_photo.jpg"));        }        return srcImageFile.substring(srcImageFile.lastIndexOf("/")+1) + "_photo.jpg";    }}

FileUploadUtil.java

public class FileUploadUtil {    public static final List<String> ALLOW_TYPES = Arrays.asList("image/jpg",            "image/jpeg", "image/png", "image/gif");    // 文件重命名    public static String rename(String fileName) {        int i = fileName.lastIndexOf(".");        String str = fileName.substring(i);        return new Date().getTime() + "" + new Random().nextInt(99999999) + str;    }    // 校验文件类型是否是被允许的    public static boolean allowUpload(String postfix) {        return ALLOW_TYPES.contains(postfix);    }}