使用Jcrop.js剪切图片因图片太大导致精准度丢失的解决办法
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了使用Jcrop.js剪切图片因图片太大导致精准度丢失的解决办法相关的知识，希望对你有一定的参考价值。
一、我在写一个头像上传剪切的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)); }
剪切图片
实际效果
以上是关于使用Jcrop.js剪切图片因图片太大导致精准度丢失的解决办法的主要内容，如果未能解决你的问题，请参考以下文章