图片上传裁剪zyupload
图片上传控件用的是zyupload控件，使用过程中遇到了一些问题，特别记录下来
上图是目前的使用效果，这个控件我是用js代码动态添加出来的
HTML代码：
<div class="widget-body"> <div class="widget-main padding-12" id="uploadarea"> <ul class="ace-thumbnails clearfix" id="gallery"> </ul> </div> </div>
js代码：
function initZyupload(){ var uploadarea=document.getElementById("uploadarea"); var zyupload=document.createElement("div"); zyupload.setAttribute("id","zyupload"); zyupload.setAttribute("class","zyupload"); uploadarea.appendChild(zyupload); $("#zyupload").zyUpload({ width : "700px", // 宽度 height : "400px", // 高度 itemWidth : "140px", // 文件项的宽度 itemHeight : "140px", // 文件项的高度 url : $("#zyupload").url= basePath+"/smart/activity/saveImages.do?id="+$("#form_Id").val(), // 上传文件的路径 fileType : ["jpg","jpeg","bmp","png"],// 上传文件的类型 fileSize : 51200000, // 上传文件的大小 multiple : true, // 是否可以多个文件上传 dragDrop : true, // 是否可以拖动上传文件 tailor : true, // 是否可以裁剪图片 del : true, // 是否可以删除文件 finishDel : false, // 是否在上传文件完成后删除预览 /* 外部获得的回调接口 */ onSelect: function(selectFiles, allFiles){ // 选择文件的回调方法 selectFile:当前选中的文件 allFiles:还没上传的全部文件 console.info("当前选择了以下文件："); console.info(selectFiles); }, onDelete: function(file, files){ // 删除一个文件的回调方法 file:当前删除的文件 files:删除之后的文件 console.info("当前删除了此文件："); console.info(file.name); }, onSuccess: function(file, response){ // 文件上传成功的回调方法 console.info("此文件上传成功："); console.info(file.name); console.info("此文件上传到服务器地址："); console.info(response); var obj=eval("("+response+")"); $("#uploadInf").append("<p>上传成功，文件地址是：" + obj.result+ "</p>"); var imgs=$("#form_url").val();//获取原url组 //在url后添加新图片的url if(imgs){ imgs+=","+obj.msg; }else{ imgs+=obj.msg; } $("#form_url").val(imgs);//设置新url组 saveActivityInfo(); clearImg();//清除所有图片 initImg(imgs);//加载图片 }, onFailure: function(file, response){ // 文件上传失败的回调方法 console.info("此文件上传失败："); console.info(file.name); bootbox.alert("上传失败"); }, onComplete: function(response){ // 上传完成的回调方法 console.info("文件上传完成"); console.info(response); } }); }
这个控件自带裁剪功能，但是当图片大小过大的时候就会显示不全，因为它并没有调整图片大小，原本多大就是多大
这个是我修改过后的效果
现在可以根据显示区域的大小来对图片进行缩放
源码代码修改部分，我现在技术不够，代码写的比较烂
首先定义2个全局变量
var ScaleWidth=0;//裁剪后图片宽度 var Scale=1;//图片缩放倍数
首先找到定义图片宽度高度处，进行修改
zoomContent.html(image).delay(500).addClass("loading");
image.load(render).attr("src", para.src);
var editWidth = $("#zoom").width();
var editHeight = $("#zoom").height();
var xScale = 1;
var yScale = 1;
if(editWidth < image.width()){
xScale = editWidth/image.width();
}
if(editHeight < image.height()){
yScale = editHeight/image.height();
}
if(xScale > yScale){
xScale = yScale;
Scale=xScale;
}
其他地方也要相应修改
zoomContent.animate({ width: image.width()*xScale, height: image.height()*xScale, marginTop: -(image.height()*xScale / 2) - borderWidth, marginLeft: -(image.width()*xScale / 2) - borderWidth }, 200, function() { show(image) }); function show(image) { image.show(); zoomContent.removeClass("loading"); self.createTailorPlug() } } }; this.createTailorPlug = function() { var width = $("#tailorImg").width(); var height = $("#tailorImg").height(); var editWidth = $("#zoom").width(); var editHeight = $("#zoom").height(); var xScale = 1; var yScale = 1; if(editWidth < width){ xScale = editWidth/width; } if(editHeight < height){ yScale = editHeight/height; } if(xScale > yScale){ xScale = yScale; Scale=xScale; } ScaleWidth=width*xScale; $("#tailorImg").css("width",width*xScale); $("#tailorImg").css("height",height*xScale); $("#tailorImg").css("position","relative"); var x1 = (width*Scale/2)-(width*Scale/5); var y1 = (height*Scale/2)-(height*Scale/5); var x2 = (width*Scale/2)+(width*Scale/5); var y2 = (height*Scale/2)+(height*Scale/5);
好了，到此为止前端的工作完成，接下来是后端实现，项目用的是spingmvc+sping+hibernate的架构
java代码Controller部分：
@RequestMapping(value = "/saveImages") @ResponseBody public MessageBox saveImages(MultipartFile file,String id) throws Exception{ this.logAllRequestParams(); String rootPath = this.getSession().getServletContext().getRealPath("/"); Double width = Double.parseDouble(this.getReqParam("tailorWidth")); //图片缩放所需宽度 String tailor = this.getReqParam("tailor"); ImageCut cut = null; if(!tailor.equals("false")){ cut = JSON.parseObject(tailor, ImageCut.class); } //重命名 String fileName = file.getOriginalFilename(); String fileSuffix=fileName.substring(fileName.lastIndexOf(".")+1); fileName=String.valueOf(System.currentTimeMillis())+"."+fileSuffix; String fileParant=rootPath + "/mirror/activity/"+id+"/"; File folder = new File(fileParant); if (!folder.exists()){ folder.mkdirs(); } File f = new File(folder,fileName); file.transferTo(f); //图片裁剪 if(CommonUtil.isNotBlank(cut)){ ImageCutUtil.covertImage(f, width, cut); }else{ ImageCutUtil.commpressPic(f.getPath(), f.getPath()); } return returnSuccessInfo(fileName,fileParant+fileName); }
到此为止图片上传裁剪功能全部完成
