一.创建一个弹出窗
1.html代码
<div id="BgDiv"></div>
<div id="imgEditArea" style="display:none;top:0;">
<h2><fmt:message key="productDetail.lbl.editImg"/><a href="#" id="btnClose" onclick="javascript:closeDiv('imgEditArea')"><fmt:message key="productDetail.lbl.closeDiv"/></a></h2>
<table border='0'>
<tr>
<td>
<div class="jc-demo-box" id="divPreview">
<img src="<c:url value="/files/BusiLic/shuiyin.jpg"/>" id="target" alt="[Jcrop Example]" />
</div>
</td>
<td valign="top" align="center" id="tdImg">
<div id="preview-pane" style="margin:30px">
<div class="preview-container" id="preview-container">
<img src="<c:url value="/files/BusiLic/shuiyin.jpg"/>" id="imgView" class="jcrop-preview" alt="Preview" />
</div>
</div>
<form enctype="multipart/form-data" id="uploadform" method="post" name="form2">
<div id="uploadBox">
<input type="file" name="file" id="file" onchange="PreviewImage(this,'target','divPreview')" size="6"/><br/><br/>
<input type="submit" value="<fmt:message key="productDetail.lbl.saveImg"/>" id="btnSave" value="upload"></input>
</div>
<br/><fmt:message key="productDetail.lbl.msgImg"/>
</form>
</td>
</tr>
</table>
</div>
2.css代码
#BgDiv{background-color:#FFFFFF; position:absolute; z-index:99; left:0; top:0; display:none; width:100%; height:100%;opacity:0.5;filter: alpha(opacity=50);-moz-opacity: 0.5;}
.s_tab td{border:0;}
#imgEditArea{position:absolute;width:90%; left:5%; top:0%; margin-left:0px; margin-top:300px;;height:auto; z-index:100;background-color:#fff; border:1px #8FA4F5 solid; padding:1px;}
#imgEditArea h2{ height:25px; font-size:14px; background-color:#8FA4F5; position:relative; padding-left:10px; line-height:25px;}
#imgEditArea h2 a{position:absolute; right:5px; font-size:12px; color:#000000}
#imgEditArea .form{padding:10px;}
3.弹出层展现
function ShowDIV(thisObjID) {
$("#BgDiv").css({ display: "block", height: $(document).height() });
$("#" + thisObjID ).css("top", "10px");
$("#" + thisObjID ).css("display", "block");
}
4.弹出层隐藏
function closeDiv(thisObjID) {
if(api!=null){
api.destroy();
}
$("#target").attr("src","<c:url value="/files/BusiLic/shuiyin.jpg"/>");
$("#imgView").attr("src","<c:url value="/files/BusiLic/shuiyin.jpg"/>");
$("#x").val("");
$("#y").val("");
$("#w").val("");
$("#h").val("");
$("#BgDiv").css("display", "none");
$("#" + thisObjID).css("display", "none");
}
二.图片选择显示截取并保存
1. 创建两个<img>
<div class="jc-demo-box" id="divPreview">
<img src="<c:url value="/files/BusiLic/shuiyin.jpg"/>" id="target" alt="[Jcrop Example]" />
</div>
<div id="preview-pane" style="margin:30px">
<div class="preview-container" id="preview-container">
<img src="<c:url value="/files/BusiLic/shuiyin.jpg"/>" id="imgView" class="jcrop-preview" alt="Preview" />
</div>
</div>
2. 图片选取和保存图片
<form enctype="multipart/form-data" id="uploadform" method="post" name="form2">
<div id="uploadBox">
<input type="file" name="file" id="file" onchange="PreviewImage(this,'target','divPreview')" size="6"/><br/><br/>
<input type="submit" value="<fmt:message key="productDetail.lbl.saveImg"/>" id="btnSave" value="upload"></input>
</div>
<br/><fmt:message key="productDetail.lbl.msgImg"/>
</form>
3. 选取图片,并在改区域显示
//js本地图片预览，兼容ie[6-9]、火狐、Chrome17+、Opera11+、Maxthon3
function PreviewImage(fileObj,imgPreviewId,divPreviewId){
$("#x").val("");
$("#y").val("");
$("#w").val("");
$("#h").val("");
if(api!=null){
api.destroy();
}
var divId;
var allowExtention=".jpg,.bmp,.gif,.png";//允许上传文件的后缀名document.getElementById("hfAllowPicSuffix").value;
var extention=fileObj.value.substring(fileObj.value.lastIndexOf(".")+1).toLowerCase();
var browserVersion= window.navigator.userAgent.toUpperCase();
if(allowExtention.indexOf(extention)>-1){
if(fileObj.files){//HTML5实现预览，兼容chrome、火狐7+等
if(window.FileReader){
var reader = new FileReader();
reader.onload = function(e){
document.getElementById(imgPreviewId).setAttribute("src",e.target.result);
$("#imgView").attr("src",$("#"+imgPreviewId).attr("src"));
createJCrop(imgPreviewId);
};
reader.readAsDataURL(fileObj.files[0]);
}else if(browserVersion.indexOf("SAFARI")>-1){
alert(getMessage(msgE0042));
}
}else if (browserVersion.indexOf("MSIE")>-1){
$("#uploadform").ajaxForm({
url:"/BML/file/proimg/iesrc",
type:"post",
dataType:"json",
success:function(data){
$("#"+imgPreviewId).attr("src","/BML/files/proInfo/temp/"+data.seriName);
$("#imgView").attr("src","/BML/files/proInfo/temp/"+data.seriName);
createJCrop(imgPreviewId);
},error:function(){
alert(getMessage(msgE0005, uploadPic));
}
});
$("#uploadform").submit();
}else if(browserVersion.indexOf("FIREFOX")>-1){//firefox
var firefoxVersion= parseFloat(browserVersion.toLowerCase().match(/firefox\/([\d.]+)/)[1]);
if(firefoxVersion<7){//firefox7以下版本
document.getElementById(imgPreviewId).setAttribute("src",fileObj.files[0].getAsDataURL());
$("#imgView").attr("src",$("#"+imgPreviewId).attr("src"));
createJCrop(imgPreviewId);
}else{//firefox7.0+
document.getElementById(imgPreviewId).setAttribute("src",window.URL.createObjectURL(fileObj.files[0]));
$("#imgView").attr("src",$("#"+imgPreviewId).attr("src"));
createJCrop(imgPreviewId);
}
}else{
document.getElementById(imgPreviewId).setAttribute("src",fileObj.value);
$("#imgView").attr("src",$("#"+imgPreviewId).attr("src"));
$(".jcrop-preview").attr("src",$("#"+imgPreviewId).attr("src"));
createJCrop(imgPreviewId);
}
}else{
alert(getMessage(msgE0041));
fileObj.value="";//清空选中文件
if(browserVersion.indexOf("MSIE")>-1){
fileObj.select();
document.selection.clear();
}
fileObj.outerHTML=fileObj.outerHTML;
}
}
3. 创建jcrop,图片剪切区域选择最主要的函数
function createJCrop(divId,width,height) {
// Create variables (in this scope) to hold the API and image size
var jcrop_api,
boundx,
boundy,
// Grab some information about the preview pane
$pcnt = $('#preview-pane .preview-container'),
$pimg = $('#preview-pane .preview-container img'),
xsize = $pcnt.width(),
ysize = $pcnt.height();
api = $.Jcrop('#'+divId, {
onSelect :updatePreview,
onChange :updatePreview,
setSelect: [ 125, 125, 250, 250 ],
aspectRatio : 1
});
var bounds = api.getBounds();
boundx = bounds[0];
boundy = bounds[1];
// Store the API in the jcrop_api variable
jcrop_api = api;
//$preview.appendTo(jcrop_api.ui.holder);
function updatePreview(c)
{
var rx = width / c.w;
var ry = height / c.h;
var ow = $("#"+divd).width();
var oh = $("#"+divd).height();
$("#w").attr("value",Math.round(rx * ow));
$("#h").attr("value",Math.round(ry * oh));
$("#x").attr("value",Math.round(rx * c.x));
$("#y").attr("value",Math.round(ry * c.y));
if (parseInt(c.w) > 0)
{
var rx = xsize / c.w;
var ry = ysize / c.h;
$pimg.css({
width: Math.round(rx * boundx) + 'px',
height: Math.round(ry * boundy) + 'px',
marginLeft: '-' + Math.round(rx * c.x) + 'px',
marginTop: '-' + Math.round(ry * c.y) + 'px'
});
}
};
}
4. 用4个<input type="hidden">用于存放图片截取的坐标和长宽
<input type="hidden" id="x" /><br/>
<input type="hidden" id="y" /><br/>
<input type="hidden" id="w" /><br/>
<input type="hidden" id="h" /><br/>
5. 截取图片后保存
$("#uploadform").ajaxForm({
url:"/BML/file/proimg/uploadImg?point="+cutPoint,
type:"post",
dataType:"json",
success:function(data){
var browserVersion= window.navigator.userAgent.toUpperCase();
if(api!=null){
api.destroy();
}
if (browserVersion.indexOf("MSIE")>-1){
if(browserVersion.indexOf("MSIE 6")>-1){//ie6
$("#target1").attr("src","/BML/files/proInfo/"+data.seriName);
}else{//ie[7-9]
$("#target1").attr("src","/BML/files/proInfo/"+data.seriName);
//document.getElementById("targetNew").setAttribute("src","/BML/files/proInfo/"+data.seriName);
}
}else{
$("#target1").attr("src","/BML/files/proInfo/"+data.seriName);
}
$("#picpath0").val(data.seriName);
},error:function(){
alert(getMessage(msgE0043));
}
});
6.图片保存
1.form表单提交，把文件传到后台。
2.jsp代码
$("#uploadform").ajaxForm({
url:"/BML/file/proimg/uploadImg?point="+cutPoint,
type:"post",
dataType:"json",
success:function(data){
var browserVersion= window.navigator.userAgent.toUpperCase();
f(api!=null){
api.destroy();
}
if (browserVersion.indexOf("MSIE")>-1){
if(browserVersion.indexOf("MSIE 6")>-1){//ie6
$("#target1").attr("src","/BML/files/proInfo/"+data.seriName);
}else{//ie[7-9]
$("#target1").attr("src","/BML/files/proInfo/"+data.seriName);
//document.getElementById("targetNew").setAttribute("src","/BML/files/proInfo/"+data.seriName);
}
}else{
$("#target1").attr("src","/BML/files/proInfo/"+data.seriName);
}
$("#picpath0").val(data.seriName);
},error:function(){
alert(getMessage(msgE0043));
}
});
closeDiv('imgEditArea');
3.后台java代码
@RequestMapping("/proimg/uploadImg")
public @ResponseBody FileHandResult uploadCutImg( Model model,@RequestParam MultipartFile file,@RequestParam String point,HttpServletRequest request,HttpServletResponse response) throws Exception{
String[] str=point.split(",");
String x = str[0];
String y = str[1];
String w = str[2];
String h = str[3];
int width = Integer.parseInt(w);
int height = Integer.parseInt(h);
int rx = Integer.parseInt(x);
int ry = Integer.parseInt(y);
FileHandResult res = new FileHandResult();
if(file.getSize()>1000000){
res.setResult(FileHandResult.REQUEST_FAIL);
model.addAttribute("msg","图片尺寸太大");
return null;
}
FileInputStream is = null ;
ImageInputStream iis = null;
try {
String name = file.getOriginalFilename();//文件名
String ext = "jpg";
//String seriName = name.substring(0,name.lastIndexOf("."))+new Date().getTime()+"."+ext;
String seriName = "proInfo"+new SimpleDateFormat("yyyyMMddHHmmss").format(new Date())+"."+ext;
String path = request.getSession().getServletContext().getRealPath("/files/proInfo");//文件路径
File srcfile = new File(path+File.separator+seriName);
Image image =ImageIO.read(file.getInputStream());
BufferedImage tag = new BufferedImage(width,height,BufferedImage.TYPE_INT_RGB);
//根据比例缩放图片
tag.getGraphics().drawImage(image.getScaledInstance(width, height, Image.SCALE_SMOOTH),0,0,null);
FileOutputStream out = new FileOutputStream(srcfile);
JPEGImageEncoder encoder = JPEGCodec.createJPEGEncoder(out);
encoder.encode(tag);
out.close();
is = new FileInputStream(srcfile);
iis = ImageIO.createImageInputStream(is);
Iterator<ImageReader> it= ImageIO.getImageReadersByFormatName(ext);
ImageReader reader = it.next();
reader.setInput(iis);
ImageReadParam param = reader.getDefaultReadParam();
//根据坐标点长宽截取图片
Rectangle rect = new Rectangle(rx,ry,170,170);
param.setSourceRegion(rect);
BufferedImage bi = reader.read(0, param);
ImageIO.write(bi, ext, new File(path+File.separator+seriName));
res.setSeriName(seriName);
} catch (Exception e) {
throw new Exception();
}finally{
if(is!=null){
is.close() ;
if(iis!=null)
iis.close();
}
}
response.setContentType("text/html");
res.setResult(FileHandResult.REQUEST_OK);
return res;
}
