jcrop+java 后台

Posted 2020-07-30 安

 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);

 

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

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