SpringMVC结合Jcrop实现图片裁剪
本文实例为大家分享了SpringMVC结合Jcrop实现图片裁剪的具体代码，供大家参考，具体内容如下
一、jsp页面：
<formname="form"action="<%=request.getContextPath()%>/UploadDemo/uploadHeadImage"class="form-horizontal" method="post"enctype="multipart/form-data"> <divclass="modal-bodytext-center"> <divclass="zxx_main_con"> <divclass="zxx_test_list"> <inputclass="photo-file"type="file"name="imgFile"id="fcupload"onchange="readURL(this);"/> <imgalt=""src=""id="cutimg"/> <inputtype="hidden"id="x"name="x"/> <inputtype="hidden"id="y"name="y"/> <inputtype="hidden"id="w"name="w"/> <inputtype="hidden"id="h"name="h"/> </div> </div> </div> <divclass="modal-footer"> <buttonid="submit"onclick="">上传</button> </div> </form>
二、jcrop组件引用情况：
<linkrel="stylesheet"href="<c:urlvalue="/resources/uploadPlugin/css/jquery.Jcrop.css"/>"type="text/css"></link> <scripttype="text/javascript"src="<c:urlvalue="/resources/uploadPlugin/scripts/jquery-1.8.3.js"/>"></script> <scripttype="text/javascript"src="<c:urlvalue="/resources/uploadPlugin/scripts/jquery.Jcrop.js"/>"></script>
三、jcrop使用方法
<scripttype="text/javascript">
//定义一个全局api，这样操作起来比较灵活
varapi=null;
functionreadURL(input){
if(input.files&&input.files[0]){
varreader=newFileReader();
reader.readAsDataURL(input.files[0]);
reader.onload=function(e){
$('#cutimg').removeAttr('src');
$('#cutimg').attr('src',e.target.result);
api=$.Jcrop('#cutimg',{
setSelect:[20,20,200,200],
aspectRatio:1,
onSelect:updateCoords
});
};
if(api!=undefined){
api.destroy();
}
}
functionupdateCoords(obj){
$("#x").val(obj.x);
$("#y").val(obj.y);
$("#w").val(obj.w);
$("#h").val(obj.h);
};
}
</script>
四、后台代码：
@RequestMapping(value="/uploadHeadImage")
publicStringuploadHeadImage(
HttpServletRequestrequest,
@RequestParam(value="x")Stringx,
@RequestParam(value="y")Stringy,
@RequestParam(value="h")Stringh,
@RequestParam(value="w")Stringw,
@RequestParam(value="imgFile")MultipartFileimageFile
)throwsException{
System.out.println("==========Start=============");
StringrealPath=request.getSession().getServletContext().getRealPath("/");
StringresourcePath="resources/uploadImages/";
if(imageFile!=null){
if(FileUploadUtil.allowUpload(imageFile.getContentType())){
StringfileName=FileUploadUtil.rename(imageFile.getOriginalFilename());
intend=fileName.lastIndexOf(".");
StringsaveName=fileName.substring(0,end);
Filedir=newFile(realPath+resourcePath);
if(!dir.exists()){
dir.mkdirs();
}
Filefile=newFile(dir,saveName+"_src.jpg");
imageFile.transferTo(file);
StringsrcImagePath=realPath+resourcePath+saveName;
intimageX=Integer.parseInt(x);
intimageY=Integer.parseInt(y);
intimageH=Integer.parseInt(h);
intimageW=Integer.parseInt(w);
//这里开始截取操作
System.out.println("==========imageCutStart=============");
ImageCut.imgCut(srcImagePath,imageX,imageY,imageW,imageH);
System.out.println("==========imageCutEnd=============");
}
}
return"user/uploadImg/test";
}
五、ImageCut.java工具类：
/**
*截取图片
*@paramsrcImageFile原图片地址
*@paramx截取时的x坐标
*@paramy截取时的y坐标
*@paramdesWidth截取的宽度
*@paramdesHeight截取的高度
*/
publicstaticvoidimgCut(StringsrcImageFile,intx,inty,intdesWidth,
intdesHeight){
try{
Imageimg;
ImageFiltercropFilter;
BufferedImagebi=ImageIO.read(newFile(srcImageFile+"_src.jpg"));
intsrcWidth=bi.getWidth();
intsrcHeight=bi.getHeight();
if(srcWidth>=desWidth&&srcHeight>=desHeight){
Imageimage=bi.getScaledInstance(srcWidth,srcHeight,Image.SCALE_DEFAULT);
cropFilter=newCropImageFilter(x,y,desWidth,desHeight);
img=Toolkit.getDefaultToolkit().createImage(
newFilteredImageSource(image.getSource(),cropFilter));
BufferedImagetag=newBufferedImage(desWidth,desHeight,
BufferedImage.TYPE_INT_RGB);
Graphicsg=tag.getGraphics();
g.drawImage(img,0,0,null);
g.dispose();
//输出文件
ImageIO.write(tag,"JPEG",newFile(srcImageFile+"_cut.jpg"));
}
}catch(Exceptione){
e.printStackTrace();
}
}
六、jcrop的两种使用方式：
1、
jQuery('#cropbox').Jcrop({
onChange:showCoords,
onSelect:showCoords
});
2、
varapi=$.Jcrop('#cropbox',{
onChange:showPreview,
onSelect:showPreview,
aspectRatio:1
});
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。