在线裁剪图片 Jcrop

Jcrop 是一个功能强大的 jQuery 图像裁剪插件，结合后端程序可以快速的实现图片裁剪的功能。

1、先将图片上传至服务器，返回上传后的路径显示在客户端，上传成功后设置jcrop

var c = {"x": 0, "y": 0, "x2": 295, "y2": 413, "w": 295, "h": 413};
$preview = $('#preview-pane');
$pcnt = $('#preview-pane .preview-container');
$pimg = $('#preview-pane .preview-container img');
xsize = $pcnt.width();
ysize = $pcnt.height();
$("#uploadIdentityImg").Jcrop({
bgColor: 'black',
bgFade: true,
bgOpacity: .4,
aspectRatio: 0.71428571 / 1,
minSize: [295, 413],
maxSize: [590, 826],
aspectRatio: xsize / ysize,
setSelect: [c.x, c.y, c.x2, c.y2],  //设定4个角的初始位置
onChange: currobj.showCoords,   //当裁剪框变动时执行的函数
onSelect: currobj.showCoords   //当选择完成时执行的函数
}, function () {
// Use the API to get the real image size
var bounds = this.getBounds();
boundx = bounds[0];
boundy = bounds[1];
// Store the API in the jcrop_api variable
jcrop_api = this;
$preview.appendTo(jcrop_api.ui.holder);
});
showCoords: function (c) {
if (parseInt(c.w) > 0) {
var rx = xsize / c.w;
var ry = ysize / c.h;
imgH = parseInt(c.h);
imgW = parseInt(c.w);
imgX = parseInt(c.x);
imgY = parseInt(c.y);
$pimg.css({
width: Math.round(rx * boundx) + 'px',
height: Math.round(ry * boundy) + 'px',
marginLeft: '-' + Math.round(rx * c.x) + 'px',
marginTop: '-' + Math.round(ry * c.y) + 'px'
});
}
}

2、本地裁剪，获得宽、高、x、y四个值，提交至服务器，由Java代码对图片流进行裁剪，本示例使用的是云存储，所以需要将原文件从云存储上获得流

@RequestMapping("jcripHeadImg")
@ResponseBody
public Map<String,Object> jcripHeadImg(
@RequestParam(required=false,value="imgW",defaultValue="")int imgW,
@RequestParam(required=false,value="imgH",defaultValue="")int imgH,
@RequestParam(required=false,value="imgX",defaultValue="")int imgX,
@RequestParam(required=false,value="imgY",defaultValue="")int imgY,
@RequestParam(required=false,value="imgFileName",defaultValue="")String imgFileName){
//根据文件名 获得文件流
ImageInputStream iis = null;
InputStream is=null;
Map<String,Object> map=new HashMap<>();
map.put("status","n");
try {
String type=imgFileName.substring(imgFileName.lastIndexOf(".")+1,imgFileName.length());
is= remoteFileService.downloadIS(imgFileName, type);
Iterator<ImageReader> it = ImageIO.getImageReadersByFormatName(type);
ImageReader reader = it.next();
// 获取图片流
iis = ImageIO.createImageInputStream(is);
/*
* <p>iis:读取源.true:只向前搜索 </p>.将它标记为 ‘只向前搜索’。
* 此设置意味着包含在输入源中的图像将只按顺序读取，可能允许 reader 避免缓存包含与以前已经读取的图像关联的数据的那些输入部分。
*/
reader.setInput(iis, true);
ImageReadParam param = reader.getDefaultReadParam();
/*
* 图片裁剪区域。Rectangle 指定了坐标空间中的一个区域，通过 Rectangle 对象
* 的左上顶点的坐标（x，y）、宽度和高度可以定义这个区域。
*/
Rectangle rect = new Rectangle(imgX, imgY, imgW, imgH);
// 提供一个 BufferedImage，将其用作解码像素数据的目标。
param.setSourceRegion(rect);
BufferedImage bi = reader.read(0, param);
ImageOutputStream imOut =ImageIO.createImageOutputStream(bi);
InputStream nIs =getImageStream(type,bi);
String newFileName=r
4000
emoteFileService.upload(nIs, imgFileName , type);
map.put("status","y");
map.put("filename",newFileName);
} catch (IOException e) {
e.printStackTrace();
}
return map;
}
/**
* 将图片流文件转为inputstrame流
* @param type
* @param bi
* @return
*/
public InputStream getImageStream(String type,BufferedImage bi){
InputStream is = null;
ByteArrayOutputStream bs = new ByteArrayOutputStream();
ImageOutputStream imOut;
try {
imOut = ImageIO.createImageOutputStream(bs);
ImageIO.write(bi, type,imOut);
is= new ByteArrayInputStream(bs.toByteArray());
} catch (IOException e) {
e.printStackTrace();
}
return is;
}

官方详细示例：http://code.ciaoca.com/jquery/jcrop/