圖片上傳裁剪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);
    }

到此爲止圖片上傳裁剪功能所有完成