jcrop截图
1、引入Jcrop相关的js、css文件；
2、调用Jcrop的两种方式：第一种方式可以通过api调用起相关的方法进行操作。
var api = $.Jcrop("#ID", {
aspectRatio : 1,
onChange : showCoords,
onSelect : showCoords
});
$('#srcImg').Jcrop({
aspectRatio : 1,
onChange : showCoords,
onSelect : showCoords
});
//前端实现
(function($){
var api = null;
var defaults={
fileName: null,
url: null,
methodType: 'POST',
dataType: 'JSON',
successFun: function(data) {
alert("处理成功");
},
failFun: function(data) {
alert("处理失败" + data.msg);
}
};
//切图
$.fn.doJcrop = function(options){
var id = $(this).attr("id");
api = $.Jcrop("#" + id, {
aspectRatio : 1,
onChange : showCoords,
onSelect : showCoords
});
//简单的事件处理程序，响应自onChange,onSelect事件，按照上面的Jcrop调用
function showCoords(obj) {
var opts = $.extend(defaults,options);
if($('#jcropForm').length == 0) {
var bounds = api.getBounds();//获取图片显示区域
var form = "<form id='jcropForm' name='jcropForm' action=" + opts.url + ">" +
"<input type='hidden' id='x' name='x' value='" + obj.x + "' />" +
"<input type='hidden' id='y' name='y' value='" + obj.y + "' />" +
"<input type='hidden' id='w' name='w' value='" + obj.w + "' />" +
"<input type='hidden' id='h' name='h' value='" + obj.h + "' />" +
"<input type='hidden' id='showWidth' name='showWidth' value='" + bounds[0] + "' />" +
"<input type='hidden' id='showHeight' name='showHeight' value='" + bounds[1] + "' />" +
"<input type='hidden' id='fileName' name='fileName' value='" + opts.fileName + "' />";
$(form).appendTo("body");
} else {
$("#x").val(obj.x);
$("#y").val(obj.y);
$("#w").val(obj.w);
$("#h").val(obj.h);
}
}
};
//保存截取图片部分
$.fn.doUpload = function(options){
var opts = $.extend(defaults,options);
$.ajax({
url: opts.url,
type: opts.methodType,
dataType: opts.dataType,
data: $('#jcropForm').serialize(),
success: function (result) {
if (result.success) {
opts.successFun(result.data);
} else {
opts.failFun(result.data);
}
},
error: function () {
alert("系统错误")
}
});
};
})(jQuery);
3、后端操作：
@RequestMapping(value = "/cut", method = RequestMethod.POST)
@ResponseBody
public Object doCut(HttpServletRequest request, int x, int y, int w, int h, int showWidth, int showHeight, final String fileName) {
String filePath = request.getRealPath("/") + fileName;
FileUtils.cutImage(filePath, x, y, w, h, showWidth, showHeight);
return new HashMap<String, Object>()
{{
put("success", true);
put("data", fileName);
}};
}
/**
*
* @param fileName
* @param x 截取时x坐标
* @param y 截取时y坐标
* @param w 截取时宽度
* @param h 截取时高度
* @param showWidth 显示宽度
* @param showHeight 显示高度
*/
public static void cutImage(String fileName, int x, int y, int w, int h, int showWidth, int showHeight) {
try {
if(w == 0 || h == 0) {
throw new IllegalArgumentException("截取文件的宽度和高度必须大于0");
}
String imagePath = fileName;
File file = new File(imagePath);
if(!file.exists()) {
throw new IllegalArgumentException("源文件不存在");
}
// 读取源图像
BufferedImage bi = ImageIO.read(file);
int srcWidth = bi.getWidth(); // 源图宽度
int srcHeight = bi.getHeight(); // 源图高度
//若原图大小大于切片大小，则进行切割
if (srcWidth >= w && srcHeight >= h) {
//还原前端图片被样式控制的大小
x = x * srcWidth / showWidth;
y = y * srcHeight / showHeight;
w = w * srcWidth / showWidth;
h = h * srcHeight / showHeight;
Image image = bi.getScaledInstance(srcWidth, srcHeight, Image.SCALE_DEFAULT);
ImageFilter cropFilter = new CropImageFilter(x, y, w, h);
Image img = Toolkit.getDefaultToolkit().createImage(new FilteredImageSource(image.getSource(), cropFilter));
BufferedImage tag = new BufferedImage(w, h,BufferedImage.TYPE_INT_RGB);
Graphics g = tag.getGraphics();
g.drawImage(img, 0, 0, null); // 绘制缩小后的图
g.dispose();
// 输出为文件
ImageIO.write(tag, FilenameUtils.getExtension(fileName), file);
}
} catch (IOException e) {
e.printStackTrace();
}
}
注：showWeight、showHeight为前端图片显示的宽高度，对应前端通过样式控制了图片显示区域大小的，需要经过后端进行处理显示比例问题