Im4Java的安装文档见:http://blog.csdn.net/tangpengtao/article/details/9208047
JCrop的插件:jquery.Jcrop.js
安装GraphicsMagick 和IM4JAVA:http://blog.sina.com.cn/s/blog_872758480100xufm.html
IM4Java的jar:im4java-1.2.0.jar
jcrop的调用js如下:
/**
* 上传头像成功后保存
* @param file
*/
uploadMyPicSuccess: function(file, data){
var filePath = data.path; // 附件地址
var width = data.width; // 原图宽度
var height = data.height; // 原图高度
var containWidth = 445;
var containHeight = 314;
var marginLeft = (containWidth - width) / 2;
var marginTop = (containHeight - height) / 2;
//截取区域的图片
$("#img_1").css({width:width, height:height, "margin-left":marginLeft, "margin-top":marginTop})
.attr("src", fileURL+'/'+data.path);
//50*50规格
$("#img_3").attr("src", fileURL+'/'+data.path);
//120*120规格
$("#img_2").attr("src", fileURL+'/'+data.path);
if(jcrop) jcrop.destroy();
var jcrop = $.Jcrop("#img_1", {
aspectRatio: 1,
onChange: showPreview,
//showPreview为裁剪图片的function,后面写
onSelect: showPreview,
setSelect: [ 0, 0, 100, 100]
});
$(".jcrop-holder").css({"margin-left":marginLeft, "top":marginTop});
//创建隐藏域,保存头像真实存储路径
$("#newUrl").val(filePath);
//点击预览按钮
$("#previewBtn").show().click(function(){
cropPic();
});
// 获取裁剪后的图片，预览
function cropPic(){
var mypic =$("#newUrl").val();
$.ajax({
async: false,
type: "POST",
dataType:"json",
cache: false,
url: baseURL +"/userinfo/cropPic",//裁剪图片的action
data: "imageX=" +cropImage.x + "&imageY=" + cropImage.y + "&imageWidth=" + cropImage.w + "&imageHeight=" + cropImage.h + "&fileUrl=" + encodeURIComponent(mypic),
success: function(data){
if(data.success){
var smallPicUrl = data.path.split(",")[0];
var normalPicUrl = data.path.split(",")[1];
// 创建隐藏域,保存小图
$("#smallUrl").val(smallPicUrl);
$("#img_3").attr("src", fileURL+"/" + smallPicUrl);
$("#img_2").attr("src", fileURL+"/" + normalPicUrl);
// 激活保存按钮
$("#saveBtn").show();
}
},
error:function(data){
alert("更新失败,请重新上传 ");
}
});
} },
定义裁剪预览:
//图片裁剪预览
window.cropImage = {};
//选中裁剪内容后,获取裁剪坐标
function showPreview(coords){
cropImage.x = coords.x;
cropImage.y = coords.y;
cropImage.w = coords.w==0?1:coords.w;
cropImage.h = coords.h==0?1:coords.h;
}
图片处理:
1.图片上传后,假设显示图片的区域为413*350,则,上传后,把图片按原有的尺寸,等比裁减
/**
* 上传个人头像
* @param request
* @param response
* @param file 上传的图片
* @param width 界面裁剪控件的宽度
* @param height 界面裁剪控件的高度
* @throws IOException
*/
@RequestMapping(value = "/uploadHeadPic")
public void uploadHeadPic(HttpServletRequest request,
HttpServletResponse response, @RequestParam("file")
MultipartFile file, @RequestParam(value="width",defaultValue="445")int width,
@RequestParam(value="height",defaultValue="314") int height) throws IOException {
if (logger.isDebugEnabled()) {
logger.debug("头像上传开始");
}
// 响应JSON
Map<String, Object> result = new HashMap<String, Object>();
boolean success = false;
String fileName = file.getOriginalFilename();
// 生成一个临时文件名
fileName = "tmp_" + GenUUIDHelper.genFileName(fileName);
if (FileUtils.isPicture(fileName)) {
Map<String, Object> r = fileManage.resizePicture(file.getInputStream(),fileName,request.getSession().getServletContext().getRealPath("/"), width, height);
String url = (String) r.get("path");
if (url != null) {
result.put("path", url.replace("\\", "/"));
result.put("width", r.get("width"));
result.put("height", r.get("height"));
success = true;
} else {
success = false;
}
}
result.put("success", success);
if (logger.isDebugEnabled()) {
logger.debug("swf上传结束");
}
// 输出响应，文件上传不支持ajax方式的响应contentType，所以不能使用ResponseBody
response.setCharacterEncoding(HttpUtil.ENCODING_UTF8);
ObjectMapper objectMapper = new ObjectMapper();
try {
JsonGenerator jsonGenerator = objectMapper.getJsonFactory().createJsonGenerator(response.getOutputStream(), JsonEncoding.UTF8);
objectMapper.writeValue(jsonGenerator, result);
response.getOutputStream().flush();
} catch (IOException e) {
logger.error("writeResponse", e);
} }
2.点击预览后,按尺寸 120*120 和 50*50裁减2张图片,并返回图片路径,做为预览图片
/**
* 裁剪个人头像;
* @param request
* @param response
* @param x
* @param y
* @param width
* @param height
* @param fileUrl
* @throws Exception
*/
@RequestMapping(value = "/cropPic")
public void cropPic(HttpServletRequest request, HttpServletResponse response,
@RequestParam("imageX") Double x,
@RequestParam("imageY") Double y,
@RequestParam("imageWidth") Double width,
@RequestParam("imageHeight") Double height,
@RequestParam("fileUrl") String fileUrl) throws Exception{
if (logger.isDebugEnabled()) {
logger.debug("裁剪个人头像开始");
}
String contentPath=request.getSession().getServletContext().getRealPath("/");
fileUrl = contentPath + File.separator + fileUrl;
if (logger.isDebugEnabled()) {
logger.debug("fileUrl="+fileUrl);
}
Map<String, Object> resultMap = new HashMap<String, Object>();
File imgFile = new File(fileUrl);
if (imgFile.exists()) {
if (logger.isDebugEnabled()) {
logger.debug("imgFile.exists...........");
}
// 压缩并保存文件
String[] fileKey = fileManage.cropPicture(fileUrl, contentPath,x.intValue(), y.intValue(), width.intValue(), height.intValue());
resultMap.put("success", true);
resultMap.put("path", fileKey[0].replace("\\", "/") + "," + fileKey[1].replace("\\", "/"));
}else{
resultMap.put("success", false);
}
if (logger.isDebugEnabled()) {
logger.debug("swf裁剪个人头像结束");
} // 输出响应，文件上传不支持ajax方式的响应contentType，所以不能使用ResponseBody
response.setCharacterEncoding(HttpUtil.ENCODING_UTF8);
ObjectMapper objectMapper = new ObjectMapper();
try {
JsonGenerator jsonGenerator = objectMapper.getJsonFactory().createJsonGenerator(response.getOutputStream(), JsonEncoding.UTF8);
objectMapper.writeValue(jsonGenerator, resultMap);
response.getOutputStream().flush();
} catch (IOException e) {
logger.error("writeResponse", e);
}
}
3.共用的图片处理类:
@Component()
public class Im4JavaPictureHandle implements IPictureHandle {
private static Log logger = LogFactory.getLog(Im4JavaPictureHandle.class); @Override
public void cropImage(String srcPath, String newPath, int x, int y, int width,
int height, int saveWidth, int saveHeight) throws Exception { IMOperation op = new IMOperation();
op.addImage(srcPath); /**
* width：裁剪的宽度
* height：裁剪的高度
* x：裁剪的横坐标
* y：裁剪的挫坐标
*/
op.crop(width, height, x, y);
op.resize(saveWidth, saveHeight);
op.addImage(newPath); ConvertCmd convert = new ConvertCmd(true); //linux下不要设置此值，不然会报错
if(!System.getProperty("os.name").equals("Linux")&&!StringUtils.isNullOrEmpty(FileConsts.GRAPHICS_MAGICK_PATH))
{
convert.setSearchPath(FileConsts.GRAPHICS_MAGICK_PATH);
}
convert.run(op);
}
@Override
public int[] resizeImage(String srcPath, String newPath, int width,
int height) throws Exception {
int[] target = scaleWidthAndHight(srcPath,width,height);
width = target[0];
height = target[1];
IMOperation op = new IMOperation();
op.addImage(srcPath);
op.resize(width, height);
op.addImage(newPath); ConvertCmd convert = new ConvertCmd(true); //linux下不要设置此值，不然会报错
if(!System.getProperty("os.name").equals("Linux")&&!StringUtils.isNullOrEmpty(FileConsts.GRAPHICS_MAGICK_PATH))
{
convert.setSearchPath(FileConsts.GRAPHICS_MAGICK_PATH);
}
convert.run(op);
return target;
} public int[] scaleWidthAndHight(String srcPath,int w,int h) throws IOException{
Image srcImage = null;
int[] target = new int[2]; FileInputStream oldIs = new FileInputStream(srcPath); srcImage = javax.imageio.ImageIO.read(oldIs); //得到图片原始大小，以便按比例压缩
int width = srcImage.getWidth(null);
int height = srcImage.getHeight(null); // 特殊处理 当w和h均为0时,长,宽默认为图片原大小
if(w==0 && h==0){
w = width;
h = height;
}else if(h==0){ if(width>=w){
h = (int)Math.round((height * w * 1.0 / width));
}else{
w = width;
h = height;
}
}
else{ if ( width >= height){
if(width >= w){
h = (int)Math.round((height * w * 1.0 / width));
}else{
w = width;
h = height;
}
}else{
if(height >= h ){
w = (int)Math.round((width * h * 1.0 / height));
}else{
w = width;
h = height;
}
} }
target[0] = w;
target[1] = h;
oldIs.close();
return target;
}
}
在linux和windows下的安装分别如下:
http://www.cnblogs.com/jennybackup/p/3951935.html