springmvc+uploadify+Jcrop 实现图片上穿并编辑保存

一部份是我从网上看来的,做了一些修改

package net.spring.controller;


import java.io.File;
import java.io.IOException;
import java.util.Map;


import javax.servlet.http.HttpServletRequest;


import net.spring.utils.OperateImage;


import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.multipart.MultipartFile;


@Controller
public class UploadFileController {


@RequestMapping("uploadindex")
public String uploadindexMethod() {
return "upload_page2";
}


@ResponseBody
@RequestMapping(value = "uploadForm")
public String uploadMethod(@RequestParam("file") MultipartFile file,
HttpServletRequest request, Map<String, Object> map) {


if (!file.isEmpty()) {
// request.getSession().getServletContext()
// 获取的是Servlet容器对象，相当于tomcat容器了。getRealPath("/")
// 获取实际路径，“/”指代项目根目录，所以代码返回的是项目在容器中的实际发布运行的根路径
String realPath = request.getServletContext().getRealPath("/");
try {
// 文件保存路径
String filePath = realPath + "upload/" + file.getOriginalFilename();
System.out.println(filePath);
// 转存文件
file.transferTo(new File(filePath));
} catch (Exception e) {
e.printStackTrace();
}
} else {
map.put("message", "文件为空");
return "errorView";
}
return null;
}


@RequestMapping(value = "uploadsubmit", method = RequestMethod.POST)
public String uploadsubmit(HttpServletRequest request,
@RequestParam(value = "x", required = false) int x,
@RequestParam(value = "y", required = false) int y,
@RequestParam(value = "width", required = false) int width,
@RequestParam(value = "height", required = false) int height,
@RequestParam(value = "imgNm", required = false) String imgNm) {
OperateImage mOperateImage = new OperateImage();
mOperateImage.setX(x);
mOperateImage.setY(y);
mOperateImage.setHeight(height);
mOperateImage.setWidth(width);
String realPath = request.getServletContext().getRealPath("/");
String srcpath = realPath + "upload/" + imgNm;
mOperateImage.setSrcpath(srcpath);
mOperateImage.setSubpath(srcpath);
try {
mOperateImage.cut();
} catch (IOException e) {
e.printStackTrace();
}
return "suc";
}


}

package net.spring.utils;


import java.awt.Rectangle;
import java.awt.image.BufferedImage;
import java.io.File;
import java.io.FileInputStream;
import java.io.IOException;
import java.util.Iterator;


import javax.imageio.ImageIO;
import javax.imageio.ImageReadParam;
import javax.imageio.ImageReader;
import javax.imageio.stream.ImageInputStream;


public class OperateImage {
private String srcpath;//源图片路径名称

private String subpath;//剪切图片存放路径名称

private int x;//剪切点x坐标

private int y;

private int width;//剪切点宽度

private int height;


public void cut() throws IOException {
FileInputStream fis = null;
ImageInputStream iis = null;
try {
fis = new FileInputStream(srcpath);// 读取图片文件  

/* 
             * 返回包含所有当前已注册 ImageReader 的 Iterator，这些 ImageReader 声称能够解码指定格式。 
             * 参数：formatName - 包含非正式格式名称 . （例如 "jpeg" 或 "tiff"）等 。 
             */  
Iterator<ImageReader> it = ImageIO.getImageReadersByFormatName("jpg");
ImageReader reader = it.next();

// 获取图片流
iis = ImageIO.createImageInputStream(fis);

            /* 
             * iis:读取源.true:只向前搜索 将它标记为‘只向前搜索’。 
             * 此设置意味着包含在输入源中的图像将只按顺序读取，可能允许 reader 避免缓存包含与以前已经读取的图像关联的数据的那些输入部分。 
             */  
reader.setInput(iis, true);

            /* 
             * 描述如何对流进行解码的类.用于指定如何在输入时从 Java Image I/O 
             * 框架的上下文中的流转换一幅图像或一组图像。用于特定图像格式的插件 将从其 ImageReader 实现的 
             * getDefaultReadParam 方法中返回 ImageReadParam 的实例。 
             */ 
ImageReadParam param = reader.getDefaultReadParam();

            /* 
             * 图片裁剪区域。Rectangle 指定了坐标空间中的一个区域，通过 Rectangle 对象 
             * 的左上顶点的坐标（x，y）、宽度和高度可以定义这个区域。 
             */ 
Rectangle rect = new Rectangle(x, y, width, height);

// 提供一个 BufferedImage，将其用作解码像素数据的目标。  
param.setSourceRegion(rect);

            /* 
             * 使用所提供的 ImageReadParam 读取通过索引 imageIndex 指定的对象，并将 它作为一个完整的 
             * BufferedImage 返回。 
             */ 
BufferedImage bi = reader.read(0, param);

// 保存新图片
ImageIO.write(bi, "jpg", new File(subpath));
} catch (Exception e) {


} finally {
if (fis != null)
fis.close();
if (iis != null)
iis.close();
}
}


public String getSrcpath() {
return srcpath;
}


public void setSrcpath(String srcpath) {
this.srcpath = srcpath;
}


public String getSubpath() {
return subpath;
}


public void setSubpath(String subpath) {
this.subpath = subpath;
}


public int getX() {
return x;
}


public void setX(int x) {
this.x = x;
}


public int getY() {
return y;
}


public void setY(int y) {
this.y = y;
}


public int getWidth() {
return width;
}


public void setWidth(int width) {
this.width = width;
}


public int getHeight() {
return height;
}


public void setHeight(int height) {
this.height = height;
}
}

<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<html>
<head>
<title>文件上传</title>
<!-- 在裁剪图片页面中，引入两个js文件，和1个Jcrop需要的css文件(Jcrop包中有，注意引入顺序，先引入jquery -->
<link rel="stylesheet" type="text/css" href="css/uploadify.css">
<link rel="stylesheet" type="text/css" href="css/jquery.Jcrop.min.css" />
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/jquery.uploadify-3.1.js"></script>
<script type="text/javascript" src="js/jquery.Jcrop.min.js"></script>
<script type="text/javascript" src="js/jquery.color.js"></script>




<script type="text/javascript">
$(function() {
var jcrop_api, boundx, boundy;
$("#file_upload_1")
.uploadify(
{
'buttonText' : '请选择2', //按钮显示的文字
height : 30,//按钮的高
width : 120,//按钮的长
swf : 'js/uploadify.swf',
uploader : 'uploadForm.html', //post请求的地址
'fileObjName' : 'file',//file对象的名字,相当于id="file"
'fileTypeExts' : '*.jpg; *.png; *.JPG ; *.PNG', //限定上传文件的类型
onUploadSuccess : function(file, data, response) {
var str = $('#divId').html();//.html()是用来读取元素的HTML内容（包括其Html标签）,如果只想显示一张的话,就不需要写这个了
var add = "<img id='demoImage' src='"
+ "${pageContext.request.contextPath}/upload/"
+ file.name
+ "'"
+ " style='margin-left:15px;margin-top:15px'  onclick='open1(this)'/></img>";
str += add;//把上次上传的html内容和这次的拼接在一起,也就是说把所有上传的图片都显示出来,如果只想显示一张的话,就不需要写这个了

$('#divId').html(str);//设置HTML内容

$('#preview').attr(
"src",
"${pageContext.request.contextPath}/upload/"
+ file.name);//设置预览图

$('#imgNm').val(file.name);
$("#demoImage").Jcrop({
onChange : updatePreview,
onSelect : updatePreview,
aspectRatio : 1 //纵横比
}, function() {
var bounds = this.getBounds();
boundx = bounds[0];
boundy = bounds[1];
jcrop_api = this;
});


}
});


//裁剪过程中，每改变裁剪大小执行该函数
function updatePreview(c) {
if (parseInt(c.w) > 0) {
$('#preview').css({
width : Math.round(200 / c.w * boundx) + 'px',//200 为预览div的宽和高</span>  
height : Math.round(200 / c.h * boundy) + 'px',
marginLeft : '-' + Math.round(200 / c.w * c.x) + 'px',
marginTop : '-' + Math.round(200 / c.h * c.y) + 'px'
});
$('#width').val(c.w); //c.w 裁剪区域的宽  
$('#height').val(c.h); //c.h 裁剪区域的高  
$('#x').val(c.x); //c.x 裁剪区域左上角顶点相对于图片左上角顶点的x坐标  
$('#y').val(c.y); //c.y 裁剪区域顶点的y坐标</span>  
}
}
});


function open1(obj) {
// 点击图片,另开一个窗口察看
window.open($(obj).attr("src"), "_blank");
}
</script>
</head>
<body>
<input type="file" name="file_upload_1" id="file_upload_1"
class="uploadify" />


<div id="divId"></div><!-- 用作显示大图 -->


<div
style="width: 200px; height: 200px; overflow: hidden; border: 1px solid gray;">
<img id="preview" width="200px" height="200px" /><!-- 用作裁剪后的预览 -->
</div>

<form action="uploadsubmit.html" method="post">
<input type="text" id="x" name="x" />
<input type="text" id="y" name="y" />
<input type="text" id="width" name="width" />
<input type="text" id="height" name="height" />
<input type="text" id="imgNm" name="imgNm" />
<input type="submit" value="确定" />
</form>
</body>


</html>