使用Jcrop.js剪切图片因图片太大导致精准度丢失的解决办法

最新推荐文章于 2022-06-05 11:11:35 发布

a233566781

最新推荐文章于 2022-06-05 11:11:35 发布

阅读量213

点赞数

文章标签： javascript java 数据库 ViewUI

原文链接：http://www.cnblogs.com/tearslee/p/5254123.html

版权

一、我在写一个头像上传剪切的demo时遇到了这个问题，正常大小的图片通过maxwidth设置后不会有问题，但是当上传图片太大时，由于被缩放导致Jcrop剪切时获取的不是实际剪切位置，因此需要按比例计算所剪切的图片大小

　　html代码

  1 <%@ page language="java" contentType="text/html; charset=utf-8"%>
  2 <%@ taglib prefix="s" uri="/struts-tags"%>
  3 <html>
  4     <head>
  5         <title>保存头像</title>
  6         <script src="js/jquery.min.js" type="text/javascript"></script>
  7         <script src="js/jquery.Jcrop.js" type="text/javascript"></script>
  8         <link rel="stylesheet" href="css/bootstrap.min.css" />
  9         <link rel="stylesheet" href="css/bootstrapValidator.min.css" />
 10         <link rel="stylesheet" href="css/index.css" />
 11         <link rel="stylesheet" href="css/jquery.Jcrop.css" type="text/css" />
 12         <link rel="stylesheet" href="demo_files/demos.css" type="text/css" />
 13         <style type="text/css">
 14         　#target {
 15                     max-width:440px;
 16                     max-height:400px;
 17                     margin-right: 15px;
 18                 }
 19         
 20         </style>
 21     </head>
 22     
 23 
 24     <body>
 25 
 26         <script type="text/javascript">
 27 
 28 
 29         </script>
 30 
 31         <table align="center" width="50%">
 32             <tr>
 33                 <td>
 34                     <s:fielderror cssStyle="color:red" />
 35                 </td>
 36             </tr>
 37         </table>
 38         
 39         <s:form action="upload.action" theme="simple" method="post"
 40             enctype="multipart/form-data" onsubmit="return checkCoords();">
 41 
 42             <table align="center" width="50%" border="0" id="table_upload">
 43                 <tr>
 44                     <td>
 45                         上传头像
 46                     </td>
 47                     <td id="more" >
 48                         <s:file name="upload" onchange="submit();" labelSeparator="sd"></s:file>
 49                         
 50                     </td>
 51                 </tr>
 52             </table>
 53 
 54         </s:form>
 55         <input type="text" value="${realName }" id="flag_img" style="display: none;"/>
 56         <table id="table_img" align="center">
 57             <tr>
 58                 <td>
 59                     <img src="upload/file/${realName }" width="440px" height="400px" id="target" alt="Flowers" onload=""/>
 60                     
 61                 </td>
 62                 <td>
 63                     <div style="width:100px;height:100px;overflow:hidden;">
 64                         <img src="upload/file/${realName }" width="100px" height="100px" id="preview" alt="Preview" />
 65                     </div>
 66                 </td>
 67                     <td>
 68                     <form action="user!SaveImage.action">
 69                             <input type="hidden" id="x" name="x">
 70                              <input type="hidden" id="y" name="y">
 71                              <input type="hidden" id="w" name="w">
 72                               <input type="hidden" id="h" name="h">
 73                               <input type="hidden" id="realW" name="realW"/>
 74                             <input type="hidden" id="realH" name="realH"/>
 75                       <div class="col-lg-12" style="width: 100%;" id="btn_sub">
 76                           <button type="submit" class="btn btn-lg btn-primary btn-block">保存头像</button>
 77                       </div>
 78                   </form>
 79                   </td>
 80             </tr>
 81             
 82         </table>
 83     </body>
 84     <script type="text/javascript">
 85     //测试代码
 86     $(document).ready(function(){
 87         if (($("#flag_img").val()=="") || ($("#flag_img").val()==null)) {
 88             $("#table_img").css("display", "none");
 89             $("#btn_sub").css("display", "none");
 90             $('#w').val(20);
 91         }else{
 92             $("#table_img").css("display", "block");
 93             $("#btn_sub").css("display", "block");
 94             $('#w').val("");
 95         }
 96     });
 97     
 98     //剪切核心代码
 99     jQuery(function($){
100 
101       // 创建jcrop对象，图片原尺寸
102       var jcrop_api, boundx, boundy;
103       
104       $('#target').Jcrop({
105         onChange: updatePreview,
106         onSelect: updatePreview,
107         aspectRatio: 0
108       },function(){
109         // 原尺寸
110         var bounds = this.getBounds();
111         boundx = bounds[0];
112         boundy = bounds[1];
113         $('#realW').val(boundx);
114         $('#realH').val(boundx);
115         // 得到jcrop_api
116         jcrop_api = this;
117       });
118 
119       function updatePreview(c)
120       {
121         if (parseInt(c.w) > 0)
122         {
123           var rx = 100 / c.w;
124           var ry = 100 / c.h;
125           updateCoords(c);
126           $('#preview').css({
127             width: Math.round(rx * boundx) + 'px',
128             height: Math.round(ry * boundy) + 'px',
129             marginLeft: '-' + Math.round(rx * c.x) + 'px',
130             marginTop: '-' + Math.round(ry * c.y) + 'px'
131           });
132         }
133       };
134 
135     });
136         function updateCoords(c){
137           $('#x').val(c.x);
138           $('#y').val(c.y);
139           $('#w').val(c.w);
140           $('#h').val(c.h);
141         };
142           
143         function checkCoords(){
144           if (parseInt($('#w').val())) {
145             return true;
146           };
147           alert('请先选择要裁剪的区域后，再提交。');
148           return false;
149         };
150   </script>
151 
152 </html>

　　java代码

/**
     * 保存头像
     * @return
     * @throws IOException    流未找到
     */
    public String SaveImage() throws IOException{
        File file=(File) session.getAttribute("fileImage");    //得到源文件
        
        Double fileX=ImageIO.read(file).getWidth()/Double.parseDouble(realW);    //缩放比例X轴
        Double fileY=ImageIO.read(file).getHeight()/Double.parseDouble(realH);    //缩放比例Y轴
        
        int newX=(int) (Double.parseDouble(x)*fileX);
        int newY=(int) (Double.parseDouble(y)*fileY);
        int newW=(int) (Double.parseDouble(w)*fileX);
        int newH=(int) (Double.parseDouble(h)*fileY);        //通过缩放比例计算实际剪切尺寸
        
        UserDao dao=new UserDao();
        User user=(User) session.getAttribute("user");        //得到用户对象
        
        String src=UploadConfigurationRead.getInstance()
                .getConfigItem("uploadFilePath").trim()
                +"/"
                +(String)session.getAttribute("realName");        //剪切文件存放位置
        user.setUserImage(src);        //头像文件名称
        String type=(String) session.getAttribute("type");        //文件后缀，根据不同图片格式调用不同图片文件流
        //调用工具类剪切图片
        ImageHelper.cutImage(file.getAbsolutePath(),file.getAbsolutePath(),newX,newY,newW,newH,type);
        //向数据库中存入数据
        if (dao.UpdateUserImage(user)>0) {            
            return "SaveSUCCESS";
        }
        return Action.ERROR;
    }

ImageHelper.cutImage()方法

/**
     * 图片剪切接口
     * @param src    原图片地址
     * @param dest    剪切后图片地址
     * @param x    
     * @param y
     * @param w
     * @param h
     * @param imageTTF    文件后缀/格式
     * @throws IOException
     */
    public static void cutImage(String src,String dest,int x,int y,int w,int h,String imageTTF) throws IOException{ 
           Iterator iterator = ImageIO.getImageReadersByFormatName(imageTTF);
           ImageReader reader = (ImageReader)iterator.next(); 
           InputStream in=new FileInputStream(src);
           ImageInputStream iis = ImageIO.createImageInputStream(in); 
           reader.setInput(iis, true); 
           ImageReadParam param = reader.getDefaultReadParam(); 
           Rectangle rect = new Rectangle(x, y, w,h);  
           param.setSourceRegion(rect); 
           BufferedImage bi = reader.read(0,param);   
           ImageIO.write(bi, "jpg", new File(dest));           

    }