之前做一个关于截图的东东，搞了好久终于弄好了，其主要关键是把前端截图的数据（x坐标，y坐标，宽度，高度和旋转角度）传到后台，然后在后台对图片做相关处理，记录一下方便以后查看。
后台配置为ssm。
Java代码：
/**
* headers="content-type=multipart/*"（必填），avatar_file（name）,avatar_data(截图数据)
*/
@RequestMapping(params = "method=picture",headers="content-type=multipart/*",method=RequestMethod.POST)
6 public @ResponseBody Map picture(@RequestParam("avatar_file")MultipartFile file ,
String avatar_data,HttpServletRequest request){
Map map=new HashMap<>();
Map resultMap=new HashMap<>();
try { String nodepath = this.getClass().getClassLoader().getResource("/").getPath();//获取项目的绝对路径
String[] str1 = nodepath.split("wtpwebapps");
int empid=(int)request.getSession().getAttribute("empid");
String filename=file.getOriginalFilename();
String prefix = filename.substring((filename.lastIndexOf(".")+1));//获取图片后缀
System.err.println("prefix=="+prefix);
String[] str=avatar_data.split(",");
int x = (int)Math.floor(Double.parseDouble(str[0].split(":")[1]));//获取截取的x坐标
int y = (int)Math.floor(Double.parseDouble(str[1].split(":")[1]));//获取截取的y坐标
int h = (int)Math.floor(Double.parseDouble(str[2].split(":")[1])); //获取截取的高度
int w = (int)Math.floor(Double.parseDouble(str[3].split(":")[1])); //获取截取的宽度
int r = Integer.parseInt(str[4].split(":")[1].replaceAll("}", ""));//获取旋转的角度
BufferedImage cutImage = PersonalCenterController.cutImage(file,x,y,w,h,prefix,str1[0]);
BufferedImage rotateImage = PersonalCenterController.rotateImage(cutImage, r);
ByteArrayOutputStream out = new ByteArrayOutputStream();
boolean flag = ImageIO.write(rotateImage, prefix, out);
byte[] b = out.toByteArray();//转换后存入数据库
map.put("in", b);
map.put("empid", empid);
int i = pcs.Pictureupload(map);
if(i>0){
resultMap.put("result", "success");
}else{
resultMap.put("result", "defeat");
}
} catch (Exception e) {
resultMap.put("result", "error");
}
return resultMap;
} /***
* 剪裁图片
* @param file 图片 * @param dest 路径
* @param x 起点横坐标
* @param y 纵坐标
* @param w 长
* @param h 高
* @throws IOException
* @date
*/
public static BufferedImage cutImage(MultipartFile file,int x,int y,int w,int h,
String prefix,String dest) { Iterator iterator = ImageIO.getImageReadersByFormatName(prefix);
dest=dest+"/wtpwebapps/pic";//剪切图片需要依赖一个本地路径（空文件夹即可）
System.err.println(dest);
try {
ImageReader reader = (ImageReader)iterator.next();
InputStream in = file.getInputStream();//转换成输入流
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, prefix, new File(dest));
return bi;
} catch (Exception e) {
}
return null;
}
/***
* 图片旋转指定角度
* @param bufferedimage 图像
* @param degree 角度
* @return
* @date
*/
public static BufferedImage rotateImage(BufferedImage bufferedimage, int degree) {
int w = bufferedimage.getWidth();
int h = bufferedimage.getHeight();
int type = bufferedimage.getColorModel().getTransparency();
BufferedImage img;
Graphics2D graphics2d;
(graphics2d = (img = new BufferedImage(w, h, type))
.createGraphics()).setRenderingHint(
RenderingHints.KEY_INTERPOLATION,
RenderingHints.VALUE_INTERPOLATION_BILINEAR);
graphics2d.setPaint(Color.WHITE);
graphics2d.fillRect(0, 0, w, h);
graphics2d.rotate(Math.toRadians(degree), w / 2, h / 2);
graphics2d.drawImage(bufferedimage, 0, 0,Color.WHITE, null);
graphics2d.dispose();
return img;
}
html代码：
在前端页面采用form表单提交的方式，当表单中存在文件时，注意添加 enctype='multipart/form-data' 这么个玩意，主要是用来设置表单的MIME编码。默认情况，这个编码格式是application/x-www-form-urlencoded，不能用于文件上传；只有使用了multipart/form-data，才能完整的传递文件数据。
1 <div id="crop-avatar">
2 <div class="avatar-view" id="imgshow">
3 <img id="image" src="" /> <!-- 显示图片的路径，我保存在数据库中的，所有填写数据库的查询即可 -->
4
5 </div>
6 <!-- Cropping modal -->
7 <div class="modal fade" id="avatar-modal" aria-hidden="true"
8 aria-labelledby="avatar-modal-label" role="dialog"
9 tabindex="-1">
10 <div class="modal-dialog modal-lg">
11 <div class="modal-content">
12 <form class="avatar-form" action='' enctype='multipart/form-data' method='post' name="form">
<!-- action填写后台路径，不用说都知道。关键是enctype='multipart/form-data'必须写。 -->
13 <div class="modal-header">
14 <button class="close" data-dismiss="modal" type="button">×</button>
15 <h4 class="modal-title" id="avatar-modal-label">更换头像</h4>
16 </div>
17 <div class="modal-body">
18 <div class="avatar-body">
19 <!-- Upload image and data -->
20 <div class="avatar-upload">
21 <input class="avatar-src" name="avatar_src" type="hidden" />
22 <input class="avatar-data" name="avatar_data" type="hidden" />
23 <label for="avatarInput">头像上传</label>
24 <input class="avatar-input" id="avatarInput" name="avatar_file" type="file" />
25
26
27 </div>
28 <!-- Crop and preview -->
29 <div class="row">
30 <div class="col-md-9">
31 <div class="avatar-wrapper" id="avatar-wrapper"></div>
32 </div>
33 <div class="col-md-3">
34 <div class="avatar-preview preview-lg"></div>
35 <div class="avatar-preview preview-md"></div>
36 <div class="avatar-preview preview-sm"></div>
37 </div>
38 </div>
39
40 <div class="row avatar-btns">
41 <div class="col-md-9">
42 <div class="btn-group">
43 <button class="btn btn-primary btn-sm"
44 data-method="rotate" data-option="-90" type="button"
45 title="Rotate -90 degrees">旋转-90度</button>
46 <button class="btn btn-primary btn-sm"
47 data-method="rotate" data-option="-45" type="button">旋转-45度</button>
48 </div>
49 <div class="btn-group">
50 <button class="btn btn-primary btn-sm"
51 data-method="rotate" data-option="90" type="button"
52 title="Rotate 90 degrees">旋转90度</button>
53 <button class="btn btn-primary btn-sm"
54 data-method="rotate" data-option="45" type="button">旋转45度</button>
55 </div>
56 </div>
57 <div class="col-md-3">
58 <button class="btn btn-primary btn-block avatar-save"
59 type="submit" id="btn">完成</button>
60 </div>
61 </div>
62
63 <div class="row avatar-btns">
64 <div class="col-md-12"> </div>
65
66
67 </div>
68 </div>
69 </div>
70 </form>
71 </div>
72 </div>
73 </div>
74 <!-- /.modal -->
75
76 <!-- Loading state -->
77 <div class="loading" aria-label="Loading" role="img"
78 tabindex="-1"></div>
79 </div>