JAVA使用Jcrop做图片裁剪上传
2017-03-09 14:16
337 查看
首先需要引用三个JS文件
然后页面上下面的JS代码是在选择图片的时候通过AJAX上传图片，这里需要注意的是Jquery必须使用2.0以上的版本，否则后台就收不到文件
<script type="text/javascript">
//图片上传的onchange事件，用于上传并回显图片
function uploadImg() {
var formData = new FormData($( "#uploadForm" )[0]);
$.ajax({
url: '${pageContext.request.contextPath}/uploadImag.do' ,
type: 'POST',
data: formData,
async: false,
cache: false,
contentType: false,
processData: false,
success: function (returndata) {
var json=eval("("+returndata+")");
var cropboxdiv=$('#cropboxdiv');//图片回显区域
$('#cropboxdiv').empty();
$("<img id='cropbox' src='"+json.path+"/"+json.fileName+"'>").appendTo(cropboxdiv);
$('#imgPath').val(json.path+"/"+json.fileName);
$('#srcPath').val(json.path);
$('#fileName').val(json.fileName);
$('#cropbox').Jcrop({//初始化Jcrop图片裁剪器
maxSize : [ 150, 170 ],
minSize: [135,135],
onSelect : function(c){//图片选择事件
$('#x').val(c.x);
$('#y').val(c.y);
$('#w').val(c.w);
$('#h').val(c.h);
}
});
}
});
}
//图片裁剪区域选好之后，交给java后台进行裁剪
function cutImg(){
$.ajax({
type:"post",
url:"${pageContext.request.contextPath}/cutImg.do",
cache:false,
data:{
x:$('#x').val(),
y:$('#y').val(),
w:$('#w').val(),
h:$('#h').val(),
srcPath:$('#srcPath').val(),
fileName:$('#fileName').val()
},
success:function(r){
$('#imgPath').val($('#srcPath').val()+"/"+$('#fileName').val());
}
});
}
</script>
@RequestMapping("uploadImag")
public void uploadImag(@RequestParam(value = "file", required = false) MultipartFile file,
HttpServletResponse response, HttpServletRequest request) throws Exception{
SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd");
String date = sdf.format(new Date());
String path = request.getSession().getServletContext()
.getRealPath("img" + File.separator + date);
String[] postfixs = file.getOriginalFilename().split("\\.");
String postfix = postfixs[postfixs.length - 1];
String fileName = new Date().getTime() + "." + postfix;
File targetFile = new File(path, fileName);
if (!targetFile.exists()) {
targetFile.mkdirs();
}
try {
file.transferTo(targetFile);
} catch (Exception e) {
e.printStackTrace();
}
imgCutPathDto icp=new imgCutPathDto();
icp.setFileName(fileName);
icp.setPath(Zealot.SSOIMAGPATH + File.separator+date);
WebUtil.print(response,Json.toJson(icp));
}这时候原始图片已经回显到了页面，在调用前台的裁剪方法是会访问后台的一个裁剪图片方法，如下
@RequestMapping("cutImg")
public void cutImg(HttpServletResponse response, HttpServletRequest request,String x,String y,String w,String h,String srcPath,String fileName){
int x1=Integer.parseInt(x);
int y1=Integer.parseInt(y);
int w1=Integer.parseInt(w);
int h1=Integer.parseInt(h);
String path = request.getSession().getServletContext()
.getRealPath("/");
CutImg.cutPic(path+srcPath+File.separator+fileName,path+srcPath, x1, y1, w1, h1,fileName);
WebUtil.print(response,"yes");
}具体裁剪工具类，如下
import java.awt.Rectangle;
import java.awt.image.BufferedImage;
import java.io.File;
import java.io.FileInputStream;
import java.io.FileNotFoundException;
import java.io.IOException;
import java.util.Date;
import java.util.Iterator;
import javax.imageio.ImageIO;
import javax.imageio.ImageReadParam;
import javax.imageio.ImageReader;
import javax.imageio.stream.ImageInputStream;
import org.apache.commons.io.FilenameUtils;
public class CutImg {
private static final String JPG_HEX = "ff";
private static final String PNG_HEX = "89";
private static final String JPG_EXT = "jpg";
private static final String PNG_EXT = "png";
public static String getFileExt(String filePath) {
FileInputStream fis = null;
String extension = FilenameUtils.getExtension(filePath);
try {
fis = new FileInputStream(new File(filePath));
byte[] bs = new byte[1];
fis.read(bs);
String type = Integer.toHexString(bs[0]&0xFF);
if(JPG_HEX.equals(type))
extension = JPG_EXT;
if(PNG_HEX.equals(type))
extension = PNG_EXT;
} catch (FileNotFoundException e) {
e.printStackTrace();
} catch (IOException e) {
e.printStackTrace();
} finally {
try {
if(fis != null)
fis.close();
} catch (IOException e) {
e.printStackTrace();
}
}
return extension;
}
public static boolean cutPic(String srcFile, String outFile, int x, int y,
int width, int height,String fileName) {
FileInputStream is = null;
ImageInputStream iis = null;
try {
// 如果源图片不存在
if (!new File(srcFile).exists()) {
return false;
}
// 读取图片文件
is = new FileInputStream(srcFile);
// 获取文件格式
String ext =getFileExt(srcFile);
//String ext = fileName.substring(fileName.lastIndexOf(".") + 1);
// ImageReader声称能够解码指定格式
Iterator<ImageReader> it = ImageIO.getImageReadersByFormatName(ext);
ImageReader reader = it.next();
// 获取图片流
iis = ImageIO.createImageInputStream(is);
// 输入源中的图像将只按顺序读取
reader.setInput(iis, true);
// 描述如何对流进行解码
ImageReadParam param = reader.getDefaultReadParam();
// 图片裁剪区域
Rectangle rect = new Rectangle(x, y, width, height);
// 提供一个 BufferedImage，将其用作解码像素数据的目标
param.setSourceRegion(rect);
// 使用所提供的 ImageReadParam 读取通过索引 imageIndex 指定的对象
BufferedImage bi = reader.read(0, param);
File tempOutFile = new File(outFile, fileName);
File tempOutFileDir = new File(outFile);
if (!tempOutFileDir.exists(
4000
)) {
tempOutFileDir.mkdirs();
}
tempOutFile.createNewFile();
ImageIO.write(bi, ext, tempOutFile);
return true;
} catch (Exception e) {
e.printStackTrace();
return false;
} finally {
try {
if (is != null) {
is.close();
}
if (iis != null) {
iis.close();
}
} catch (IOException e) {
e.printStackTrace();
return false;
}
}
}
}如此图片裁剪便完成了，原始的图片我在这儿被裁剪后的图片覆盖了，根据之前的上传路径就可以回显裁剪后的图片了
<link rel="stylesheet" href="Jcrop/jquery.Jcrop.css"> <script src="Jcrop/jquery-2.2.3.js"></script> <script src="Jcrop/jquery.Jcrop.js"></script>
然后页面上下面的JS代码是在选择图片的时候通过AJAX上传图片，这里需要注意的是Jquery必须使用2.0以上的版本，否则后台就收不到文件
<script type="text/javascript">
//图片上传的onchange事件，用于上传并回显图片
function uploadImg() {
var formData = new FormData($( "#uploadForm" )[0]);
$.ajax({
url: '${pageContext.request.contextPath}/uploadImag.do' ,
type: 'POST',
data: formData,
async: false,
cache: false,
contentType: false,
processData: false,
success: function (returndata) {
var json=eval("("+returndata+")");
var cropboxdiv=$('#cropboxdiv');//图片回显区域
$('#cropboxdiv').empty();
$("<img id='cropbox' src='"+json.path+"/"+json.fileName+"'>").appendTo(cropboxdiv);
$('#imgPath').val(json.path+"/"+json.fileName);
$('#srcPath').val(json.path);
$('#fileName').val(json.fileName);
$('#cropbox').Jcrop({//初始化Jcrop图片裁剪器
maxSize : [ 150, 170 ],
minSize: [135,135],
onSelect : function(c){//图片选择事件
$('#x').val(c.x);
$('#y').val(c.y);
$('#w').val(c.w);
$('#h').val(c.h);
}
});
}
});
}
//图片裁剪区域选好之后，交给java后台进行裁剪
function cutImg(){
$.ajax({
type:"post",
url:"${pageContext.request.contextPath}/cutImg.do",
cache:false,
data:{
x:$('#x').val(),
y:$('#y').val(),
w:$('#w').val(),
h:$('#h').val(),
srcPath:$('#srcPath').val(),
fileName:$('#fileName').val()
},
success:function(r){
$('#imgPath').val($('#srcPath').val()+"/"+$('#fileName').val());
}
});
}
</script>
<body> <div id="cropboxdiv"> <img id="cropbox" src=""> </div> <form id= "uploadForm"> <table> <tr> <a href="javascript:void(0);" class="file">选择文件 <input type="file" name="file" onchange="uploadImg()"> </a> </tr> </table> </form> <input type="hidden" id="x" /> <input type="hidden" id="y" /> <input type="hidden" id="w" /> <input type="hidden" id="h" /> <input type="hidden" id="imgPath" /> <input type="hidden" id="srcPath" /> <input type="hidden" id="fileName" /> </body>下面是后台接收前台onchange事件上传的图片，最后将图片的相对路径和文件名封装到一个DTO里面方便传输数据
@RequestMapping("uploadImag")
public void uploadImag(@RequestParam(value = "file", required = false) MultipartFile file,
HttpServletResponse response, HttpServletRequest request) throws Exception{
SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd");
String date = sdf.format(new Date());
String path = request.getSession().getServletContext()
.getRealPath("img" + File.separator + date);
String[] postfixs = file.getOriginalFilename().split("\\.");
String postfix = postfixs[postfixs.length - 1];
String fileName = new Date().getTime() + "." + postfix;
File targetFile = new File(path, fileName);
if (!targetFile.exists()) {
targetFile.mkdirs();
}
try {
file.transferTo(targetFile);
} catch (Exception e) {
e.printStackTrace();
}
imgCutPathDto icp=new imgCutPathDto();
icp.setFileName(fileName);
icp.setPath(Zealot.SSOIMAGPATH + File.separator+date);
WebUtil.print(response,Json.toJson(icp));
}这时候原始图片已经回显到了页面，在调用前台的裁剪方法是会访问后台的一个裁剪图片方法，如下
@RequestMapping("cutImg")
public void cutImg(HttpServletResponse response, HttpServletRequest request,String x,String y,String w,String h,String srcPath,String fileName){
int x1=Integer.parseInt(x);
int y1=Integer.parseInt(y);
int w1=Integer.parseInt(w);
int h1=Integer.parseInt(h);
String path = request.getSession().getServletContext()
.getRealPath("/");
CutImg.cutPic(path+srcPath+File.separator+fileName,path+srcPath, x1, y1, w1, h1,fileName);
WebUtil.print(response,"yes");
}具体裁剪工具类，如下
import java.awt.Rectangle;
import java.awt.image.BufferedImage;
import java.io.File;
import java.io.FileInputStream;
import java.io.FileNotFoundException;
import java.io.IOException;
import java.util.Date;
import java.util.Iterator;
import javax.imageio.ImageIO;
import javax.imageio.ImageReadParam;
import javax.imageio.ImageReader;
import javax.imageio.stream.ImageInputStream;
import org.apache.commons.io.FilenameUtils;
public class CutImg {
private static final String JPG_HEX = "ff";
private static final String PNG_HEX = "89";
private static final String JPG_EXT = "jpg";
private static final String PNG_EXT = "png";
public static String getFileExt(String filePath) {
FileInputStream fis = null;
String extension = FilenameUtils.getExtension(filePath);
try {
fis = new FileInputStream(new File(filePath));
byte[] bs = new byte[1];
fis.read(bs);
String type = Integer.toHexString(bs[0]&0xFF);
if(JPG_HEX.equals(type))
extension = JPG_EXT;
if(PNG_HEX.equals(type))
extension = PNG_EXT;
} catch (FileNotFoundException e) {
e.printStackTrace();
} catch (IOException e) {
e.printStackTrace();
} finally {
try {
if(fis != null)
fis.close();
} catch (IOException e) {
e.printStackTrace();
}
}
return extension;
}
public static boolean cutPic(String srcFile, String outFile, int x, int y,
int width, int height,String fileName) {
FileInputStream is = null;
ImageInputStream iis = null;
try {
// 如果源图片不存在
if (!new File(srcFile).exists()) {
return false;
}
// 读取图片文件
is = new FileInputStream(srcFile);
// 获取文件格式
String ext =getFileExt(srcFile);
//String ext = fileName.substring(fileName.lastIndexOf(".") + 1);
// ImageReader声称能够解码指定格式
Iterator<ImageReader> it = ImageIO.getImageReadersByFormatName(ext);
ImageReader reader = it.next();
// 获取图片流
iis = ImageIO.createImageInputStream(is);
// 输入源中的图像将只按顺序读取
reader.setInput(iis, true);
// 描述如何对流进行解码
ImageReadParam param = reader.getDefaultReadParam();
// 图片裁剪区域
Rectangle rect = new Rectangle(x, y, width, height);
// 提供一个 BufferedImage，将其用作解码像素数据的目标
param.setSourceRegion(rect);
// 使用所提供的 ImageReadParam 读取通过索引 imageIndex 指定的对象
BufferedImage bi = reader.read(0, param);
File tempOutFile = new File(outFile, fileName);
File tempOutFileDir = new File(outFile);
if (!tempOutFileDir.exists(
4000
)) {
tempOutFileDir.mkdirs();
}
tempOutFile.createNewFile();
ImageIO.write(bi, ext, tempOutFile);
return true;
} catch (Exception e) {
e.printStackTrace();
return false;
} finally {
try {
if (is != null) {
is.close();
}
if (iis != null) {
iis.close();
}
} catch (IOException e) {
e.printStackTrace();
return false;
}
}
}
}如此图片裁剪便完成了，原始的图片我在这儿被裁剪后的图片覆盖了，根据之前的上传路径就可以回显裁剪后的图片了
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- MVC使用JCrop上传、裁剪图片
- jquery.Jcrop结合JAVA后台实现图片裁剪上传实例
- 使用Jcrop插件裁剪图片并上传(Spring MVC)
- ASP.NET使用Jcrop插件实现图片上传裁剪功能
- MVC使用JCrop上传、裁剪图片
- jcrop实现图片区域选择、裁剪及上传
- 使用JAVA在线下载图片至本地，并上传至FTP
- fileuploadJs+JcropJs+php综合小应用 实现图片拖拽上传与裁剪功能的demo
- 使用Java代码在Android中实现图片裁剪功能
- Java项目中使用FTP与SFTP上传图片
- 使用Jcrop.js和jQuery.form.js，用ImageIO等进行头像上传缩放及裁剪
- Jquery Jcrop 插件java的使用方法 包括图片保存类
- java对上传图片缩放裁剪
- 百度UEditor的介绍和图片上传的使用（java）
- 使用asp.net上传图片并且裁剪的方法
- java使用FtpClient上传图片文件
- 使用Jcrop实现图片上传、剪裁和保存(ASP.NET)
- java使用Jcrop剪切图片并保存
- java实现图片处理之Jcrop 图像裁剪插件