源码下载地址：http://download.csdn.net/detail/liuguofeng719/8029603
公司直接可以拿来使用
package com.fileupload.rest;
import java.awt.image.BufferedImage;
import java.io.File;
import java.io.FileInputStream;
import java.io.FileOutputStream;
import java.io.IOException;
import java.io.InputStream;
import java.util.UUID;
import javax.imageio.ImageIO;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import net.coobird.thumbnailator.Thumbnails;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.multipart.MultipartFile;
import org.springframework.web.multipart.MultipartHttpServletRequest;
@Controller
public class ClipAvatarCotroller {
@RequestMapping(value = "/clipUpload")
public void clipUpload(HttpServletRequest request, HttpServletResponse response) {
String pathString = request.getRealPath("/");
MultipartHttpServletRequest mhr = (MultipartHttpServletRequest) request;
MultipartFile file = mhr.getFile("file");
try {
byte[] byt = file.getBytes();
File f = new File(pathString + File.separator + "upload");
if (!f.exists())
f.mkdirs();
FileOutputStream fis = new FileOutputStream(f.getPath() + File.separator + file.getOriginalFilename());
fis.write(byt);
fis.flush();
fis.close();
response.getOutputStream().print("/upload/" + file.getOriginalFilename());
} catch (IOException e) {
e.printStackTrace();
}
}
@RequestMapping(value = "/crop_form")
public void crop_form(HttpServletRequest request, HttpServletResponse response) {
int x = Integer.valueOf(request.getParameter("x"));
int y = Integer.valueOf(request.getParameter("y"));
int w = Integer.valueOf(request.getParameter("w"));
int h = Integer.valueOf(request.getParameter("h"));
String fileName = request.getParameter("fileName");
String fileString = fileName.substring(fileName.lastIndexOf("\\") + 1);
String pathString = request.getRealPath("/");
File f = new File(pathString + File.separator + "clip");
if (!f.exists())
f.mkdirs();
try {
File f1 = new File(pathString + File.separator + "upload");
InputStream is = new FileInputStream(f1.getPath() + File.separator + fileString);
BufferedImage bufferImage = ImageIO.read(is);
//获取原图的宽和高
int srcWidth = bufferImage.getWidth();
int srcHeight = bufferImage.getHeight();
//X*原图宽/显示需要展示图片框的宽
//Y*原图高/显示需要展示图片框的高
//W*原图宽/显示需要展示图片框的宽
//H*原图高/显示需要展示图片框的高
//400 * 270
// <div class="bigImg" style="float: left;">
// <img id="srcImg" src="" width="400px" height="270px" />
// </div>
int x1 = x * srcWidth / 400;
int y1 = y * srcHeight / 270;
int w1 = w * srcWidth / 400;
int h1 = h * srcHeight / 270;
Thumbnails.of(bufferImage).sourceRegion(x1, y1, w1, h1).size(w, h).keepAspectRatio(false).toFile(
f.getPath() + File.separator + UUID.randomUUID().toString().replaceAll("-", "") + ".jpg");
} catch (IOException e) {
e.printStackTrace();
}
}
}
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>裁剪Demo</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<link rel="stylesheet" type="text/css"
href="<%=request.getContextPath()%>/css/jquery.Jcrop.css">
<script src="<%=request.getContextPath()%>/js/jquery.min.js"></script>
<script src="<%=request.getContextPath()%>/js/jquery.Jcrop.min.js"></script>
<style>
.jcrop-holder #preview_box {
display: block;
position: absolute;
z-index: 2000;
top: 10px;
right: -280px;
padding: 6px;
border: 1px rgba(0,0,0,.4) solid;
background-color: white;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
-webkit-box-shadow: 1px 1px 5px 2px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 1px 1px 5px 2px rgba(0, 0, 0, 0.2);
box-shadow: 1px 1px 5px 2px rgba(0, 0, 0, 0.2);
}
#preview_box .preview-container {
width: 200px;
height: 200px;
overflow: hidden;
}
</style>
<script>
var jcrop_api,boundx,boundy;
$(function(){
$("#iframe-hidden").bind("load",function(){
var imgpath = $("#iframe-hidden").contents().find("pre").text();
$("#srcImg").attr("src","."+imgpath);
$("#previewImg").attr("src","."+imgpath);
cutImage();
});
});
//裁剪图像
function cutImage(){
$("#srcImg").Jcrop( {
aspectRatio : 1,
onChange : showCoords,
onSelect : showCoords,
minSize :[200,200]
},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;
// Move the preview into the jcrop container for css positioning
//$preview.appendTo(jcrop_api.ui.holder);
});
//简单的事件处理程序，响应自onChange,onSelect事件，按照上面的Jcrop调用
function showCoords(obj) {
$("#x").val(obj.x);
$("#y").val(obj.y);
$("#w").val(obj.w);
$("#h").val(obj.h);
if (parseInt(obj.w) > 0) {
//计算预览区域图片缩放的比例，通过计算显示区域的宽度(与高度)与剪裁的宽度(与高度)之比得到
var rx = $("#preview_box .preview-container").width() / obj.w;
var ry = $("#preview_box .preview-container").height() / obj.h;
//通过比例值控制图片的样式与显示
$("#previewImg").css( {
width : Math.round(rx * boundx) + "px", //预览图片宽度为计算比例值与原图片宽度的乘积
height : Math.round(ry * boundy) + "px", //预览图片高度为计算比例值与原图片高度的乘积
marginLeft : "-" + Math.round(rx * obj.x) + "px",
marginTop : "-" + Math.round(ry * obj.y) + "px"
});
}
}
}
function changeFile(){
var file = $("#fName").val();
$("#fileName").val(file);
}
</script>
</head>
<body>
<form method="post" action="clipUpload" enctype="multipart/form-data"
target="iframe-hidden">
<input type="text" name="name" />
<input type="file" name="file" id="fName" onchange="changeFile(this)"/>
<input type="submit" />
</form>
<iframe id="iframe-hidden" name="iframe-hidden" style="display:none;"></iframe>
<div id="cutImage">
<div class="bigImg" style="float: left;">
<img id="srcImg" src="" width="400px" height="270px" />
</div>
<div id="preview_box">
<div class="preview-container">
<img id="previewImg" src="" class="jcrop-preview" alt="Preview" />
</div>
</div>
<div>
<form action="crop_form" method="post" id="crop_form">
<input type="hidden" id="bigImage" name="bigImage" />
<input type="hidden" id="x" name="x" />
<input type="hidden" id="y" name="y" />
<input type="hidden" id="w" name="w" />
<input type="hidden" id="h" name="h" />
<input type="hidden" id="fileName" name="fileName" />
<p>
<input type="submit" value="确认" id="crop_submit" />
</p>
</form>
</div>
</div>
</body>
</html>
源代码下载地址：
相关推荐
spring mvc thumbnailator +jcrop 实现头像裁剪 项目直接可以拿来使用
自己通过ajaxfileupload.js结合struts2实现图片上传文件，并通过jcrop和java图像处理功能实现了图片剪切的功能。该功能效果和新浪QQ的头像上传功能效果一样，在ie下可以正常使用 火狐下更换图片时效果样式会走形
整理了图片大小限制的处理。新建的个项目添加spring和struts2的jar包就可以运行，我用到的包在项目下有截图。
PHP+jQuery+jCrop裁剪头像 处理图片
2.使用了JCrop插件 3.可以选择背景色 4.控制选择框为1:1的比例 5.设置了选择框的最大范围和最小范围 6.可以支持键盘上下左右箭头移动 7.可以切换图片上传到服务器后截取图片并返回客户端 8.图片上传是无刷新上传的">...
最近在项目开发中遇到了这样的需求就是要实现用户上传头像，并且要保存用户裁切后的部分作为用户头像。下面给大家分享node.js（express）中使用Jcrop进行图片剪切上传功能，需要的的朋友参考下吧
帮助你在前台进行图片的随意剪切，dome清晰易懂，参数配置简单，有需要的下载试试吧。
使用Jcrop.js和jQuery.form.js，用ImageIO等进行头像上传缩放及裁剪 http://blog.csdn.net/recordme/article/details/42550703
在网上找了好久的上传头像并预览的例子，有是有，但就是不好改，或者是效果不是很好看，所以就决定自己写一个，个人觉得还不错，挺好的，需要的朋友可以下载下来看看！
自己琢磨了好几天，实现了头像上传的前后台，用的spring_mvc,spring,hibernate 三个框架实现。是项目实训，贴出来共享。
jcrop实现剪切上传图片，获取剪切图片的坐标和宽高度，还有一些操作例子。
$('#target').Jcrop({ minSize: [190,190], //边框最小尺寸 //maxSize:[190,190], setSelect: [0,0,170,230], //创建边框参数【x,y,x1,y1】 onChange: updatePreview, //边框改变时发生的事件 onSelect: ...
基于jquery Jcrop的头像编辑器封装版.zip
使用Jcrop 实现图片上传前进行剪切预览效果，亲测火狐、谷歌、IE浏览器！
Jcrop图片剪切,导入MyElipse就能运行
jquery头像截取jcropjquery头像截取jcropjquery头像截取jcrop
p+jquery（jcrop）实现的图片上传前先进行剪切预览，导入即用。
Jcrop实现jsp页面头像裁剪