jcrop+java 后台
1 //jcrop 用法 lpf 2 //页面引入 3 //<link rel="stylesheet" href="${basePath}/scripts/jcrop/jquery.Jcrop.css" type="text/css" /> 4 //<script src="${basePath}/scripts/jcrop/jquery.Jcrop.js"></script> 5 //图片位置<img src="" id="target" style="width: 100%;height:100%;"/> 6 //赋值框<form action="${basePath}/success.jsp" method="post" > 7 //x轴:<input type="text" size="4" id="x1" name="x" /> 8 //y轴:<input type="text" size="4" id="y1" name="y"/> 9 //宽度:<input type="text" size="4" id="w" name="w"/> 10 //高度:<input type="text" size="4" id="h" name="h"/> 11 //显示图片宽:<input type="text" size="4" id="tw" name="tw"/> 12 //<input type="button" value="裁剪" onclick="uploadImage();"/> 13 //</form> 14 jQuery(function($){ 15 //浏览器宽高 16 var width=$(window).width(); 17 var height=$(window).height(); 18 //图片工具对象 19 var jcrop_api, 20 boundx="", 21 boundy="", 22 $preview = $('#preview-pane'), 23 $pcnt = $('#preview-pane .preview-container'), 24 $pimg = $('#preview-pane .preview-container img'), 25 xsize = $pcnt.width(), 26 ysize = $pcnt.height(); 27 $('#target').Jcrop({ 28 onChange:showCoords,//获取选中的值 29 onSelect:showCoords,//获取拖拽的值 30 keySupport:true, 31 aspectRatio:1, 32 boxWidth:width, 33 boxHeight:height 34 },function(){ 35 var bounds = this.getBounds(); 36 boundx = bounds[0]; 37 boundy = bounds[1]; 38 jcrop_api = this; 39 $preview.appendTo(jcrop_api.ui.holder); 40 }); 41 //赋值 42 function showCoords(c){ 43 var x=c.x; 44 var y=c.y; 45 var w=c.w; 46 var h=c.h; 47 $("#x1").val(parseInt(x)); 48 $("#y1").val(parseInt(y)); 49 $("#w").val(parseInt(w)); 50 $("#h").val(parseInt(h)); 51 if (parseInt(c.w) > 0){ 52 var rx = xsize / c.w; 53 var ry = ysize / c.h; 54 $pimg.css({ 55 width: Math.round(rx * boundx) + 'px', 56 height: Math.round(ry * boundy) + 'px', 57 marginLeft: '-' + Math.round(rx * c.x) + 'px', 58 marginTop: '-' + Math.round(ry * c.y) + 'px' 59 }); 60 } 61 } 62 //更换图片设置 63 function upimg(img){ 64 jcrop_api.setImage(img,function(){ 65 this.setOptions({ 66 bgOpacity:0.6, 67 minSize: [80, 80], 68 maxSize: [350, 350] 69 }); 70 var bounds = this.getBounds(); 71 boundx = bounds[0]; 72 $('#tw').val(boundx); 73 this.setSelect(getRandom()); 74 }); 75 } 76 //随机选择框 77 function getRandom() { 78 var dim = jcrop_api.getBounds(); 79 return [ 80 Math.round(Math.random() * dim[0]), 81 Math.round(Math.random() * dim[1]), 82 Math.round(Math.random() * dim[0]), 83 Math.round(Math.random() * dim[1]) 84 ]; 85 }; 86 });
1 File fromPic = new File(fileSavePath); 2 BufferedImage image = ImageIO.read(fromPic); 3 int imageWidth = image.getWidth(); 4 // 按比例缩放后 输出到 BufferedImage 5 BufferedImage thumbnail = Thumbnails.of(fileSavePath) 6 .scale(Double.valueOf(request.getParameter("tw")) 7 / imageWidth) 8 .asBufferedImage(); 9 // 截取图片路径， 10 fileSavePath = request.getSession().getServletContext() 11 .getRealPath("/upload") 12 + "/" + upLoadPath + newfilename + "_thum.jpg"; 13 //生成截取图片,按照坐标 14 Thumbnails 15 .of(thumbnail) 16 .sourceRegion( 17 Integer.valueOf(request.getParameter("x")), 18 Integer.valueOf(request.getParameter("y")), 19 Integer.valueOf(request.getParameter("w")), 20 Integer.valueOf(request.getParameter("h"))) 21 .size(Integer.valueOf(request.getParameter("w")), 22 Integer.valueOf(request.getParameter("h"))) 23 .keepAspectRatio(false) 24 .toFile(fileSavePath);
在页面进行截取的时候，如果所操作的图片与原图大小不一致，在后台进行截取的时候就会出现偏差，
此处拿到原图后会与页面显示的图片大小进行比较，计算比例，进行比例缩放，在进行截取
