一、我在写一个头像上传剪切的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));
}
剪切图片
实际效果
时间： 2024-12-24 09:24:27