<#-- 上傳頭像 測試頁 使用imgareaselect 插件 --> 

<link rel="stylesheet" type="text/css" href="${frontRes}/imgareaselect/css/imgareaselect-animated.css" /> 
<link rel="stylesheet" type="text/css" href="${frontRes}/imgareaselect/css/index.css" /> 
<script type="text/javascript" src="${frontRes}/imgareaselect/jquery-1.4.2.min.js"></script> 
<script type="text/javascript" src="${frontRes}/imgareaselect/jquery.imgareaselect.pack.js"></script> 
<script type="text/javascript" src="${frontRes}/imgareaselect/ajaxfileupload.js"></script> 
<script> 
function addFile(obj){ 
//document.getElementById('img').src = path; 
$.ajaxFileUpload({ 
url:'${huluUrl}/trainer/upload/ajaxUpload', //用于文件上傳的服務(wù)器端請求地址 
secureuri: false, //是否需要安全協(xié)議，一般設(shè)置為false 
fileElementId: 'photoFile', //文件上傳域的ID 
dataType: 'json', //返回值類型 一般設(shè)置為json 
success: function (data){//服務(wù)器成功響應(yīng)處理函數(shù) 
var infoArray = eval("("+data+")"); //包數(shù)據(jù)解析為json格式 
var arr = infoArray.data; 
$("#img").attr("src","/images/"+arr.photo); 
}, 
error: function (){//服務(wù)器響應(yīng)失敗處理函數(shù) 
alert('與服務(wù)器通信失敗，請稍后再試！'); 
parent.location.reload(); 
} 
}); 
} 
function preview(img, selection) { 
if (!selection.width || !selection.height) 
return; 
//預(yù)覽 
var scaleX = 100 / selection.width; 
var scaleY = 100 / selection.height; 
//var imgx = document.getElementById("photo").style.width; 
var imgx = parseInt($("#photo").css("width").split("px")[0]); 
var imgy = parseInt($("#photo").css("height").split("px")[0]); 
console.debug(imgx+"===="+imgy); 
$('#preview img').css({ 
width : Math.round(scaleX * imgx), 
height : Math.round(scaleY * imgy), 
marginLeft : -Math.round(scaleX * selection.x1), 
marginTop : -Math.round(scaleY * selection.y1) 
}); 
$('#x1').val(selection.x1); 
$('#y1').val(selection.y1); 
$('#x2').val(selection.x2); 
$('#y2').val(selection.y2); 
$('#w').val(selection.width); 
$('#h').val(selection.height); 
//后臺數(shù)據(jù) 
$('#x1s').val(selection.x1); 
$('#y1s').val(selection.y1); 
$('#x2s').val(selection.x2); 
$('#y2s').val(selection.y2); 
$('#imgx').val(parseInt(imgx));//原圖width寬度 
$('#imgy').val(parseInt(imgy));//原圖高度height 
} 
$(function(selection) { 
var imgx = $("#photo").css("width").split("px")[0]; 
var imgy = $("#photo").css("height").split("px")[0]; 
var ares = 0; 
console.debug(imgx+"===="+imgy); 
if(imgx>imgy){ 
ares = imgy; 
}else{ 
ares = imgx; 
} 
var ias = $('#photo').imgAreaSelect({ 
aspectRatio : '1:1', 
handles : true, 
fadeSpeed : 200, 
onSelectChange : preview, 
instance : true 
}); 
ias.setSelection(0, 0, ares-1, ares-1);//初始化選擇區(qū)域 
ias.setOptions({ 
show : true 
}); 
ias.update(); 
$(".imgareaselect-outer").css("cursor","Crosshair"); 
$(".imgareaselect-outer").css("background-color","rgba(255,255,255,0.9)"); 
//預(yù)覽 
var scaleX = 100 / ares; 
var scaleY = 100 / ares; 
$('#preview img').css({ 
width : Math.round(scaleX * imgx), 
height : Math.round(scaleY * imgy), 
marginLeft : -Math.round(scaleX * 0), 
marginTop : -Math.round(scaleY * 0) 
}); 
//后臺數(shù)據(jù) 
$('#x1s').val(0); 
$('#y1s').val(0); 
$('#x2s').val(ares-1); 
$('#y2s').val(ares-1); 
$('#imgx').val(imgx);//原圖width寬度 
$('#imgy').val(imgy);//原圖高度height 
}); 
</script> 
<div class="container" style="margin-top:20px;"> 
<div class="row"> 
<div class="col-xs-9 pull-right"> 
<div class="media media-heading"> 
<h4 style="font-weight: 600;float: left">上傳照片</h4> 
</div> 
<div class="row" style="margin-top: 15px"> 
<div class="col-lg-12"> 
<div class="btn-group" style="float: left"> 
<div class="btn btn-default" role="button" style="position: relative; overflow: hidden;background-color: #8DC21F;color: #ffffff;"> 
<span>+添加照片</span> 
<input id="photoFile" type="file" name="photoFile" onchange="addFile(this);" style="height:34px;position: absolute; right: 0px; top: 0px; margin: 0px; padding: 0px; cursor: pointer; opacity: 0;"> 
</div> 
</div> 
<span style="float: left; margin-left: 15px; color: #888888"> 
<ul> 
<li>建議本人照片</li> 
<li>只支持JPG、PNG、GIF，大小不超過5M</li> 
</ul> 
</span> 
</div> 
</div> 
<div class="row"> 
<div class="col-lg-12"> 
<div class="shangchuantouxiang"> 
<img src="/images/${(trainer.photo)!""}" alt="..." id ="img" class="img-circle" style="width: 320px; height: 320px"> 
</div> 
</div> 
</div> 
<form action ="${huluUrl}/trainer/upload/uploadPhotoTest" method="post" enctype="multipart/form-data" > 
<input type="text" id="x1s" name = "x1s" value="-" /> 
<input type="text" id="y1s" name = "y1s" value="-" /> 
<input type="text" id="x2s" name = "x2s" value="-" /> 
<input type="text" id="y2s" name = "y2s" value="-" /> 
<input type="text" id="imgx" name = "imgx" value="-" /> 
<input type="text" id="imgy" name = "imgy" value="-" /> 
<div class="row" style="margin-top: 15px; margin-left: 80px"> 
<div class="col-lg-5"> 
<div class="btn-group"> 
<button type="button" class="btn btn-default"id="chongxinshangchuan">重新上傳</button> 
</div> 
<div class="btn-group"> 
<button type="submit" class="btn btn-default" id="baocun">　保存　</button> 
</div> 
</div> 
</div> 
</form> 
</div> 
</div> 
</div> 
<div id="root"> 
<div id="main"> 
<div class="container demo"> 
<div style="float: left; width: 50%;"> 
<p class="instructions">Click and drag on the image to select an area.</p> 
<div style="width: 302px;height: 302px;"> 
<div style="width: 302px;height:302px;border: 1px solid #aaa;"> 
<div style="line-height: 300px; text-align: center; overflow: hidden; z-index: 1001; width: 300px; height: 300px; position: relative; left: 50%; top: 50%; margin-left: -150px; margin-top: -150px; "> 
<img id="photo" src="/images/${(trainer.photo)!""}" style="max-height:300px;max-width: 300px;" /> 
</div> 
</div> 
</div> 
</div> 
<div style="float: left; width: 50%;"> 
<p style="font-size: 110%; font-weight: bold; padding-left: 0.1em;">Selection Preview</p> 
<div style="width: 100px; height: 100px;"> 
<div id="preview" style="width: 100px; height: 100px; overflow: hidden;"> 
<img src="/images/${trainer.photo!}" style="width: 100px; height: 100px;" /> 
</div> 
</div> 
<table> 
<thead> 
<tr> 
<th colspan="2" style="font-size: 110%; font-weight: bold; text-align: left; padding-left: 0.1em;">Coordinates</th> 
<th colspan="2" style="font-size: 110%; font-weight: bold; text-align: left; padding-left: 0.1em;">Dimensions</th> 
</tr> 
</thead> 
<tbody> 
<tr> 
<td style="width: 10%;"><b>X<sub>1</sub>:</b></td> 
<td style="width: 30%;"><input type="text" id="x1" value="-" /></td> 
<td style="width: 20%;"><b>Width:</b></td> 
<td><input type="text" value="-" id="w" /></td> 
</tr> 
<tr> 
<td><b>Y<sub>1</sub>:</b></td> 
<td><input type="text" id="y1" value="-" /></td> 
<td><b>Height:</b></td> 
<td><input type="text" id="h" value="-" /></td> 
</tr> 
<tr> 
<td><b>X<sub>2</sub>:</b></td> 
<td><input type="text" id="x2" value="-" /></td> 
<td></td> 
<td></td> 
</tr> 
<tr> 
<td><b>Y<sub>2</sub>:</b></td> 
<td><input type="text" id="y2" value="-" /></td> 
<td></td> 
<td></td> 
</tr> 
</tbody> 
</table> 
</div> 
</div> 
</div> 
</div> 

//顯示圖片需要在服務(wù)端配置一個(gè)虛擬路徑
(tomcat) server.xml
<Context debug="0" docBase="G:\Image" path="/images" reloadable="true"/>
回顯一下數(shù)據(jù)
[java] view plain copy 在CODE上查看代碼片派生到我的代碼片
/** 
* 跳到上傳頭像2(可截取圖片) 
* 
* @return 
*/ 
@RequestMapping(value = "toUploadPhoto", method = RequestMethod.GET) 
public ModelAndView toUploadTest() { 
ModelAndView mav = leftMenu("/trainer/upload/uploadPhoto"); 
// 
Trainer trainer = null; 
try { 
Long userId = FrontShiroUtil.getUserId(); 
if (null != userId) { 
trainer = trainerRepo.findOne(userId); 
trainerDbSvc.updateLastLoginTime(userId); 
} 
} catch (Exception e) { 
e.printStackTrace(); 
} 
mav.addObject("trainer", trainer); 
return mav; 
} 
// 局部刷新上傳圖片 
@RequestMapping("/ajaxUpload") 
public @ResponseBody AjaxResult ajaxUpload(MultipartHttpServletRequest request) { 
Trainer trainer = new Trainer(); 
// 獲得第1張圖片（根據(jù)前臺的name名稱得到上傳的文件） 
MultipartFile file = request.getFile("photoFile"); 
if (file.getSize() != 0) { 
// 獲得文件名： 
String filename = file.getOriginalFilename(); 
String timeType = null; 
if (null != filename && !filename.equals("")) { 
String imgtype = filename.substring(filename.lastIndexOf(".")); 
// 獲取路徑 
String ctxPath = "E:/rudongImage/photo/"; 
// 創(chuàng)建文件 
File dirPath = new File(ctxPath); 
if (!dirPath.exists()) { 
dirPath.mkdirs(); 
} 
// 以時(shí)間為文件名 
Date date = new Date(); 
SimpleDateFormat sdformat = new SimpleDateFormat("yyyyMMddHHmmss");// 24小時(shí)制 
String LgTime = sdformat.format(date); 
timeType = LgTime + imgtype; 
File uploadFile = new File(ctxPath + timeType); 
try { 
FileCopyUtils.copy(file.getBytes(), uploadFile); 
} catch (IOException e) { 
e.printStackTrace(); 
} 
} 
String headPhotoPath = "photo/" + timeType; 
trainer.setPhoto(headPhotoPath); 
} 
try { 
// 根據(jù)UserId查詢培訓(xùn)師 
Long userId = FrontShiroUtil.getUserId(); 
if (null != userId) { 
trainer.setUserId(userId); 
// 更新培訓(xùn)師頭像 
trainerDbSvc.updateTrainerPhoto(trainer); 
} 
} catch (Exception e) { 
e.printStackTrace(); 
} 
return AjaxResult.createSuccess(trainer);//<span style="font-family: Arial, Helvetica, sans-serif;">AjaxResult 可修改</span> 
} 
/** 
* 截取區(qū)域上傳圖片測試 
* 
* @return 
*/ 
@RequestMapping(value = "uploadPhotoTest", method = RequestMethod.POST) 
public ModelAndView uploadPhotoTest(MultipartHttpServletRequest request, @RequestParam("x1s") Integer x1, 
@RequestParam("y1s") Integer y1, @RequestParam("x2s") Integer x2, @RequestParam("y2s") Integer y2, 
@RequestParam("imgx") Integer imgWidth, @RequestParam("imgy") Integer imgHeight) { 
ModelAndView mav = leftMenu("redirect:/trainer/upload/toUploadPhoto"); 
Trainer trainer = null; 
try { 
// 根據(jù)UserId查詢培訓(xùn)師 
Long userId = FrontShiroUtil.getUserId(); 
if (null != userId) { 
trainer = trainerRepo.findOne(userId); 
} 
} catch (Exception e) { 
e.printStackTrace(); 
} 
File uploadFile = new File("E:/rudongImage/" + trainer.getPhoto()); 
InputStream is = null; 
BufferedImage src = null; 
int w = -1; 
int h = -1; 
try { 
is = new FileInputStream(uploadFile); 
src = javax.imageio.ImageIO.read(is); 
w = src.getWidth(null); // 得到源圖寬 
h = src.getHeight(null); // 得到源圖高 
is.close(); 
} catch (Exception e) { 
e.printStackTrace(); 
} 
Integer l = 0; 
// 以小邊為準(zhǔn)(原圖尺寸) 
if (w < h) { 
l = w; 
} else { 
l = h; 
} 
// 以小邊為準(zhǔn)(縮略圖尺寸) 
Integer l2 = 0; 
if (imgWidth < imgHeight) { 
l2 = imgWidth; 
} else { 
l2 = imgHeight; 
} 
Integer x = (x1 * l) / l2;// 起點(diǎn)x 
Integer y = (y1 * l) / l2;// 起點(diǎn)y 
Integer xs = (x2 * l) / l2;// 終點(diǎn)x 對角線位置 
Integer ys = (y2 * l) / l2;// 終點(diǎn)y 對角線位置 
ImageUtil imageUtil = new ImageUtil(); 
// 返回截取后的文件名 
String photoName = ""; 
imageUtil.cutImage(uploadFile, "E:/rudongImage/photo/", x, y, xs - x, ys - y); 
String headPhotoPath = "photo/" + photoName; 
trainer.setPhoto(headPhotoPath); 
// 更新培訓(xùn)師頭像 
trainerDbSvc.updateTrainerPhoto(trainer); 
return mav; 
} 

import java.awt.Color; 
import java.awt.Graphics; 
import java.awt.Image; 
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.io.InputStream; 
import java.io.OutputStream; 
import java.util.Arrays; 
import java.util.Iterator; 
import javax.imageio.ImageIO; 
import javax.imageio.ImageReadParam; 
import javax.imageio.ImageReader; 
import javax.imageio.stream.ImageInputStream; 
import org.slf4j.Logger; 
import org.slf4j.LoggerFactory; 
/** 
* 圖片截取工具類 
*/ 
public class ImageUtil { 
private Logger log = LoggerFactory.getLogger(getClass()); 
private static String DEFAULT_THUMB_PREVFIX = "thumb_"; 
private static String DEFAULT_CUT_PREVFIX = "cut_"; 
private static Boolean DEFAULT_FORCE = false; 
/** 
* <p>Title: cutImage</p> 
* <p>Description: 根據(jù)原圖與裁切size截取局部圖片</p> 
* @param srcImg 源圖片 
* @param output 圖片輸出流 
* @param rect 需要截取部分的坐標(biāo)和大小 
*/ 
public void cutImage(File srcImg, OutputStream output, java.awt.Rectangle rect){ 
if(srcImg.exists()){ 
java.io.FileInputStream fis = null; 
ImageInputStream iis = null; 
try { 
fis = new FileInputStream(srcImg); 
// ImageIO 支持的圖片類型 : [BMP, bmp, jpg, JPG, wbmp, jpeg, png, PNG, JPEG, WBMP, GIF, gif] 
String types = Arrays.toString(ImageIO.getReaderFormatNames()).replace("]", ","); 
String suffix = null; 
// 獲取圖片后綴 
if(srcImg.getName().indexOf(".") > -1) { 
suffix = srcImg.getName().substring(srcImg.getName().lastIndexOf(".") + 1); 
}// 類型和圖片后綴全部小寫，然后判斷后綴是否合法 
if(suffix == null || types.toLowerCase().indexOf(suffix.toLowerCase()+",") < 0){ 
log.info("Sorry, the image suffix is illegal. the standard image suffix is {}." + types); 
return ; 
} 
// 將FileInputStream 轉(zhuǎn)換為ImageInputStream 
iis = ImageIO.createImageInputStream(fis); 
// 根據(jù)圖片類型獲取該種類型的ImageReader 
ImageReader reader = ImageIO.getImageReadersBySuffix(suffix).next(); 
reader.setInput(iis,true); 
ImageReadParam param = reader.getDefaultReadParam(); 
param.setSourceRegion(rect); 
BufferedImage bi = reader.read(0, param); 
ImageIO.write(bi, suffix, output); 
} catch (FileNotFoundException e) { 
e.printStackTrace(); 
} catch (IOException e) { 
e.printStackTrace(); 
} finally { 
try { 
if(fis != null) fis.close(); 
if(iis != null) iis.close(); 
if(output != null) output.close(); 
} catch (IOException e) { 
e.printStackTrace(); 
} 
} 
}else { 
log.info("the src image is not exist."); 
} 
} 
public void cutImage(File srcImg, OutputStream output, int x, int y, int width, int height){ 
cutImage(srcImg, output, new java.awt.Rectangle(x, y, width, height)); 
} 
public void cutImage(File srcImg, String destImgPath, java.awt.Rectangle rect){ 
File destImg = new File(destImgPath); 
if(destImg.exists()){ 
String p = destImg.getPath(); 
try { 
if(!destImg.isDirectory()) p = destImg.getParent(); 
if(!p.endsWith(File.separator)) p = p + File.separator; 
cutImage(srcImg, new java.io.FileOutputStream(p + DEFAULT_CUT_PREVFIX + "_" + new java.util.Date().getTime() + "_" + srcImg.getName()), rect); 
} catch (FileNotFoundException e) { 
log.info("the dest image is not exist."); 
} 
}else log.info("the dest image folder is not exist."); 
} 
public void cutImage(File srcImg, String destImg, int x, int y, int width, int height){ 
cutImage(srcImg, destImg, new java.awt.Rectangle(x, y, width, height)); 
} 
public void cutImage(String srcImg, String destImg, int x, int y, int width, int height){ 
cutImage(new File(srcImg), destImg, new java.awt.Rectangle(x, y, width, height)); 
} 
/** 
* <p>Title: thumbnailImage</p> 
* <p>Description: 根據(jù)圖片路徑生成縮略圖 </p> 
* @param imagePath 原圖片路徑 
* @param w 縮略圖寬 
* @param h 縮略圖高 
* @param prevfix 生成縮略圖的前綴 
* @param force 是否強(qiáng)制按照寬高生成縮略圖(如果為false，則生成最佳比例縮略圖) 
*/ 
public void thumbnailImage(File srcImg, OutputStream output, int w, int h, String prevfix, boolean force){ 
if(srcImg.exists()){ 
try { 
// ImageIO 支持的圖片類型 : [BMP, bmp, jpg, JPG, wbmp, jpeg, png, PNG, JPEG, WBMP, GIF, gif] 
String types = Arrays.toString(ImageIO.getReaderFormatNames()).replace("]", ","); 
String suffix = null; 
// 獲取圖片后綴 
if(srcImg.getName().indexOf(".") > -1) { 
suffix = srcImg.getName().substring(srcImg.getName().lastIndexOf(".") + 1); 
}// 類型和圖片后綴全部小寫，然后判斷后綴是否合法 
if(suffix == null || types.toLowerCase().indexOf(suffix.toLowerCase()+",") < 0){ 
log.info("Sorry, the image suffix is illegal. the standard image suffix is {}." + types); 
return ; 
} 
log.info("target image's size, width:{}, height:{}.",w,h); 
Image img = ImageIO.read(srcImg); 
// 根據(jù)原圖與要求的縮略圖比例，找到最合適的縮略圖比例 
if(!force){ 
int width = img.getWidth(null); 
int height = img.getHeight(null); 
if((width*1.0)/w < (height*1.0)/h){ 
if(width > w){ 
h = Integer.parseInt(new java.text.DecimalFormat("0").format(height * w/(width*1.0))); 
log.info("change image's height, width:{}, height:{}.",w,h); 
} 
} else { 
if(height > h){ 
w = Integer.parseInt(new java.text.DecimalFormat("0").format(width * h/(height*1.0))); 
log.info("change image's width, width:{}, height:{}.",w,h); 
} 
} 
} 
BufferedImage bi = new BufferedImage(w, h, BufferedImage.TYPE_INT_RGB); 
Graphics g = bi.getGraphics(); 
g.drawImage(img, 0, 0, w, h, Color.LIGHT_GRAY, null); 
g.dispose(); 
// 將圖片保存在原目錄并加上前綴 
ImageIO.write(bi, suffix, output); 
output.close(); 
} catch (IOException e) { 
System.out.println("generate thumbnail image failed."+e); 
} 
}else{ 
System.out.println("the src image is not exist."); 
} 
} 
public void thumbnailImage(File srcImg, int w, int h, String prevfix, boolean force){ 
String p = srcImg.getAbsolutePath(); 
try { 
if(!srcImg.isDirectory()) p = srcImg.getParent(); 
if(!p.endsWith(File.separator)) p = p + File.separator; 
thumbnailImage(srcImg, new java.io.FileOutputStream(p + prevfix +srcImg.getName()), w, h, prevfix, force); 
} catch (FileNotFoundException e) { 
log.info("the dest image is not exist."+e); 
} 
} 
public void thumbnailImage(String imagePath, int w, int h, String prevfix, boolean force){ 
File srcImg = new File(imagePath); 
thumbnailImage(srcImg, w, h, prevfix, force); 
} 
public void thumbnailImage(String imagePath, int w, int h, boolean force){ 
thumbnailImage(imagePath, w, h, DEFAULT_THUMB_PREVFIX, DEFAULT_FORCE); 
} 
public void thumbnailImage(String imagePath, int w, int h){ 
thumbnailImage(imagePath, w, h, DEFAULT_FORCE); 
} 
public void readUsingImageReader(String src, String dest, int w, int h)throws Exception { 
// 取得圖片讀入器 
Iterator readers = ImageIO.getImageReadersByFormatName("png"); 
ImageReader reader = (ImageReader) readers.next(); 
// 取得圖片讀入流 
InputStream source = new FileInputStream(src); 
ImageInputStream iis = ImageIO.createImageInputStream(source); 
reader.setInput(iis, true); 
// 圖片參數(shù) 
ImageReadParam param = reader.getDefaultReadParam(); 
// 100，200是左上起始位置，300就是取寬度為300的，就是從100開始取300寬，就是橫向100~400，同理縱向200~350的區(qū)域就取高度150 
// Rectangle rect = new Rectangle(100, 200, 300, 150);// 
int hh = 0; 
if (h > 100) 
hh = (h - 100) / 3; 
Rectangle rect = new Rectangle(0, hh, 227, 100); 
param.setSourceRegion(rect); 
BufferedImage bi = reader.read(0, param); 
ImageIO.write(bi,"jpg", new File(dest)); 
} 
public static void main(String[] args) throws Exception { 
//new ImageUtil().thumbnailImage("imgs/Tulips.jpg", 150, 100); 
//new ImageUtil().cutImage("imgs/Tulips.jpg","imgs", 250, 70, 300, 400); 
//new ImageUtil().readUsingImageReader("e://rudongImage/photo/20160302090226.png", "e://rudongImage/photo/2.png", 227, 163); 
} 
} 

<bean id="multipartResolver"
class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
<!-- one of the properties available; the maximum file size in bytes 
<property name="maxUploadSize" value="9999999999"/>
-->
</bean>