jcrop+java 后台

//jcrop 用法  lpf 
//页面引入
//<link rel="stylesheet" href="${basePath}/scripts/jcrop/jquery.Jcrop.css" type="text/css" />
//<script src="${basePath}/scripts/jcrop/jquery.Jcrop.js"></script>
//图片位置<img src="" id="target" style=" 100%;height:100%;"/>
//赋值框<form action="${basePath}/success.jsp" method="post" >          
        //x轴:<input type="text" size="4" id="x1" name="x" />  
        //y轴:<input type="text" size="4" id="y1" name="y"/>  
        //宽度:<input type="text" size="4" id="w" name="w"/>  
        //高度:<input type="text" size="4" id="h" name="h"/> 
        //显示图片宽:<input type="text" size="4" id="tw" name="tw"/>          
        //<input type="button" value="裁剪" onclick="uploadImage();"/>  
//</form>
jQuery(function($){
//浏览器宽高
var width=$(window).width();
var height=$(window).height();
//图片工具对象
var jcrop_api,  
boundx="",  
boundy="",  
$preview = $('#preview-pane'),  
$pcnt = $('#preview-pane .preview-container'),  
$pimg = $('#preview-pane .preview-container img'),  
xsize = $pcnt.width(),  
ysize = $pcnt.height();  
 $('#target').Jcrop({  
    onChange:showCoords,//获取选中的值  
    onSelect:showCoords,//获取拖拽的值  
    keySupport:true,
    aspectRatio:1,
    boxWidth:width,
    boxHeight:height                         
 },function(){  
      var bounds = this.getBounds();  
      boundx = bounds[0];  
      boundy = bounds[1];  
      jcrop_api = this;  
      $preview.appendTo(jcrop_api.ui.holder);                                      
    });
 //赋值
 function showCoords(c){  
    var x=c.x;  
    var y=c.y;  
    var w=c.w;  
    var h=c.h;  
    $("#x1").val(parseInt(x));  
    $("#y1").val(parseInt(y));  
    $("#w").val(parseInt(w));  
    $("#h").val(parseInt(h));  
 if (parseInt(c.w) > 0){  
        var rx = xsize / c.w;  
        var ry = ysize / c.h;  
        $pimg.css({  
           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'  
        });  
      }  
 }  
//更换图片设置
 function upimg(img){
     jcrop_api.setImage(img,function(){
     this.setOptions({
           bgOpacity:0.6,
           minSize: [80, 80],
             maxSize: [350, 350]          
     });
     var bounds = this.getBounds();  
     boundx = bounds[0];  
     $('#tw').val(boundx);
     this.setSelect(getRandom());    
     });
 }
 //随机选择框
 function getRandom() {
     var dim = jcrop_api.getBounds();
     return [
       Math.round(Math.random() * dim[0]),
       Math.round(Math.random() * dim[1]),
       Math.round(Math.random() * dim[0]),
       Math.round(Math.random() * dim[1])
     ];
   };
});

File fromPic = new File(fileSavePath);
            BufferedImage image = ImageIO.read(fromPic);
            int imageWidth = image.getWidth();
            // 按比例缩放后 输出到 BufferedImage
            BufferedImage thumbnail = Thumbnails.of(fileSavePath)
                    .scale(Double.valueOf(request.getParameter("tw"))
                            / imageWidth)
                            .asBufferedImage();
                    // 截取图片路径，
                    fileSavePath = request.getSession().getServletContext()
                    .getRealPath("/upload")
                    + "/" + upLoadPath + newfilename + "_thum.jpg";
                    //生成截取图片,按照坐标
                    Thumbnails
                    .of(thumbnail)
                    .sourceRegion(
                            Integer.valueOf(request.getParameter("x")),
                            Integer.valueOf(request.getParameter("y")),
                            Integer.valueOf(request.getParameter("w")),
                            Integer.valueOf(request.getParameter("h")))
                    .size(Integer.valueOf(request.getParameter("w")),
                            Integer.valueOf(request.getParameter("h")))
                    .keepAspectRatio(false)
                    .toFile(fileSavePath);

在页面进行截取的时候，如果所操作的图片与原图大小不一致，在后台进行截取的时候就会出现偏差，

此处拿到原图后会与页面显示的图片大小进行比较，计算比例，进行比例缩放，在进行截取