图片上传裁剪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);
    }

到此为止图片上传裁剪功能全部完成