上传头像,并且可以截图,需要jcrop 架包,可以到网址去浏览效果下载架包:http://deepliquid.com/projects/Jcrop/demos.php
<pre name="code" class="html">//导入样式和js
<link rel="stylesheet" href="/jquery.Jcrop.min.css" type="text/css" />
<script type="text/javascript" src="/jquery-1.8.0.js"></script>
<script type="text/javascript" src="/jquery.Jcrop.js"></script>
<script type="text/javascript">
var boundx;var boundy;
//初始化
jcrop jQuery(function($) {
var jcrop_api;
$('#element_id').Jcrop({
aspectRatio : 1,
onSelect: showCoords,//选中时间
onChange: showCoords,//改变事件
onRelease: clearCoords,
minSize :[200,200] //最小截图范围
},function(){
var bounds = this.getBounds(); //获取当前图片的宽高
boundx = bounds[0];
boundy = bounds[1];
jcrop_api = this;
});
//改变的事件
$("#coords").on('change','input',function(e){
var x1 = $("#x1").val(),
x2 = $("#x2").val();
y1 = $("#y1").val();
y2 = $("#y2").val();
jcrop_api.setSelect([x1,y1,x2,y2]);
});
});
//显示移动的坐标
function showCoords(c){
$("#x1").val(c.x);
$("#y1").val(c.y);
$("#x2").val(c.x2);
$("#y2").val(c.y2);
$("#w").val(c.w);
$("#h").val(c.h);
//预览的判断 宽
if (parseInt(c.w) > 0) {
//截图的大小与宽高的比率
var rx = 120 / c.w;
var ry = 120 / c.h; /
/预览的样式
$('#previewImg').css({
//计算预览图的宽高 用比率乘图片大小
width : Math.round(rx * 733) + 'px', //733为原图的宽,如果原图宽为拿正确,截图的预览图片比例会有问题 在这里可以用全局变量boundx动态获取
height : Math.round(ry * 598) + 'px', //598为原图的高 boundy 为动态获取的高
marginLeft : '-' + Math.round(rx * c.x) + 'px',
marginTop : '-' + Math.round(ry * c.y) + 'px' });
} };
function clearCoords(){
$("#coords input").val('');
};
//点击事件
function cut(){
//获取坐标
var x = $("input[name='x1']").val();
var y = $("input[name='y1']").val();
var w = $("input[name='w']").val();
var h = $("input[name='h']").val();
//json 传值
$.getJSON("${ctx}/cut?x=" + x + "&y=" + y +"&w=" + w,{h:h},function(data){
});
}
</script>
<!-- 页面部分 -->
<body>
<div id="cutImage" >
<div class="bigImg" style="float: left;">
<img id="element_id" src="./assets/img/1.png"/>
</div>
<div id="preview_box" style="width: 100px; height: 100px; overflow: hidden; margin-left: 5px;">
<img id="previewImg" src="./assets/img/1.png" width="120px"/>
</div>
<!-- 表单存放坐标 样式需要可隐藏 -->
<form id="coords" class="coords" action="${ctx}/cut" οnsubmit="return false;">
<table>
<tr>
<td>
X1
<input id="x1" type="text" name="x1" id="x1" size="4"></input>
</td>
</tr>
<tr>
<td>
Y1
<input id="y1" type="text" name
="y1" id="y1" size="4"></input>
</td>
</tr>
<tr>
<td>
X2
<input id="x2" type="text" name="x2" id="x2" size="4"></input>
</td>
</tr>
<tr>
<td>
Y2
<input id="y2" type="text" name="y2" id="y2" size="4"></input>
</td>
</tr>
<tr>
<td>
W
<input id="w" type="text" name="w" id="w" size="4"></input>
</td>
</tr>
<tr>
<td>
H
<input id="h" type="text" name="h" id="h" size="4"></input>
</td>
</tr>
<tr>
<td>
<input type="button" οnclick="cut()" value="截图"/>
</td>
</tr>
</table>
</form>
</div>
</body>
后台的代码是参见 http://blog.csdn.net/chenssy/article/details/8814966
/**
* 图片切割
* @param imagePath 原图地址
* @param x 目标切片坐标 X轴起点
* @param y 目标切片坐标 Y轴起点
* @param w 目标切片 宽度
* @param h 目标切片 高度
*/
public void cutImage(String imagePath, int x ,int y ,int w,int h,int boundx, int boundy){
//此处多了两个参数分别是页面传入的原图的宽(boundx)和高(boundy)
try {
Image img;
ImageFilter cropFilter;
// 读取源图像
BufferedImage bi = ImageIO.read(new File(imagePath));
int srcWidth = bi.getWidth(); // 源图宽度
int srcHeight = bi.getHeight(); // 源图高度
//若原图大小大于切片大小,则进行切割
if (srcWidth >= w && srcHeight >= h) {
Image image = bi.getScaledInstance(srcWidth, srcHeight,Image.SCALE_DEFAULT);
int x1 = x*srcWidth/boundx;
int y1 = y*srcHeight/boundy;
int w1 = w*srcWidth/boundx;
int h1 = h*srcHeight/boundx;
cropFilter = new CropImageFilter(x1, y1, w1, h1);
img = Toolkit.getDefaultToolkit().createImage(new FilteredImageSource(image.getSource(), cropFilter));
BufferedImage tag = new BufferedImage(w1, h1,BufferedImage.TYPE_INT_RGB);
Graphics g = tag.getGraphics();
g.drawImage(img, 0, 0, null); // 绘制缩小后的图
g.dispose();
// 输出为文件
ImageIO.write(tag, "JPEG", new File(imagePath));
}
} catch (IOException e) {
e.printStackTrace();
}
}
//后台切图
@RequestMapping("/cut")
public String c(String x, String y,String w,String h,HttpServletRequest req){
//名字
String name = "1.png";
//路径
String imagePath=req.getSession().getServletContext().getRealPath("/assets/img") + "\\" + name;
//调用的方法
TextController imageCut = new TextController();
imageCut.cutImage(imagePath, Integer.parseInt(x), Integer.parseInt(y), Integer.parseInt(w), Integer.parseInt(h));
return "";
}