plupload:Springmvc使用plupload上傳頭像，並自動剪切圓形

　　最近在做的這個項目非常重視頁面的用戶效果體驗，要求用戶注冊時上傳的頭像自動生成圓形，這樣做一來是為了好看，二來是讓公司安卓、iOS那邊可以直接使用用戶頭像，不用剪切。該功能我使用了plupload上傳插件，然后通過查閱資料寫了一個圓形切割的Java工具類，下面記錄一下完成的過程：

一、plupload的特性

　　Plupload這個JavaScript控件可以讓你選擇Adobe Flash、Google Gears、HTML5、Microsoft Silverlight、Yahoo BrowserPlus或正常表單Form等多種方法進行文件上傳。Plupload還提供其它功能包括：上傳進度提醒、圖片縮小、多文件上傳，拖拽文件 到上傳控件，文件類型過濾和Chunked上傳等。這些功能在不同的上傳方式中支持情況會受到限制。

二、plupload的使用

1. 下載plupload：http://www.plupload.com/download；
2. 統一寫一個plupload的操作類PluploadUtil.java，注釋寫的很詳細，代碼如下：

   import java.io.BufferedOutputStream;
   import java.io.File;
   import java.io.FileOutputStream;
   import java.io.IOException;
   import java.io.InputStream;
   import java.io.OutputStream;
   import java.util.Iterator;
   import java.util.List;
   
   import org.springframework.util.MultiValueMap;
   import org.springframework.web.multipart.MultipartFile;
   import org.springframework.web.multipart.MultipartHttpServletRequest;
   
   import com.law.bean.Plupload;
   
   /**
    * Plupload是一個上傳插件。
    * 上傳原理為單個文件依次發送至服務器.
    * 上傳打文件時可以將其碎片化上傳。但是一般情況下，不會這樣做，
    * 所以這里更多的是處理普通文件的批量上傳。
    * 這里主要處理文件上傳
    */
   public class PluploadUtil {
       private static final int BUF_SIZE = 2 * 1024;
       /**上傳失敗響應的成功狀態碼*/
       public static final String RESP_SUCCESS = "{\"jsonrpc\" : \"2.0\", \"result\" : \"success\", \"id\" : \"id\"}";
       /**上傳失敗響應的失敗狀態碼*/
       public static final String RESP_ERROR = "{\"jsonrpc\" : \"2.0\", \"error\" : {\"code\": 101, \"message\": \"Failed to open input stream.\"}, \"id\" : \"id\"}";
       
       /**
        * 用於Plupload插件的文件上傳,自動生成唯一的文件保存名
        * @param plupload - 存放上傳所需參數的bean
        * @param dir - 保存目標文件目錄
        * @throws IllegalStateException
        * @throws IOException
        */
       public static String upload(Plupload plupload, File dir) throws IllegalStateException, IOException {
           //生成唯一的文件名
           String filename = "" + System.currentTimeMillis() + plupload.getName();
           upload(plupload, dir, filename);
           return filename;
       }
       
       /**
        * 用於Plupload插件的文件上傳
        * @param plupload - 存放上傳所需參數的bean
        * @param dir - 保存目標文件目錄
        * @param filename - 保存的文件名
        * @throws IllegalStateException
        * @throws IOException
        */
       public static void upload(Plupload plupload, File dir, String filename) throws IllegalStateException, IOException {
           int chunks = plupload.getChunks();    //獲取總的碎片數
           int chunk = plupload.getChunk();    //獲取當前碎片(從0開始計數)
           
           System.out.println(plupload.getMultipartFile() + "----------");
           
           MultipartHttpServletRequest multipartRequest = (MultipartHttpServletRequest) plupload.getRequest();    
           MultiValueMap<String, MultipartFile> map = multipartRequest.getMultiFileMap();
           
           if(map != null) {
               if (!dir.exists()) dir.mkdirs();    //如果目標文件夾不存在則創建新的文件夾
               
               //事實上迭代器中只存在一個值,所以只需要返回一個值即可
               Iterator<String> iter = map.keySet().iterator();
               while(iter.hasNext()) {
                   String str = (String) iter.next();
                   List<MultipartFile> fileList =  map.get(str);
                   for(MultipartFile multipartFile : fileList) {
                       //因為只存在一個值,所以最后返回的既是第一個也是最后一個值
                       plupload.setMultipartFile(multipartFile);
                       
                       //創建新目標文件
                       File targetFile = new File(dir.getPath()+ "/" + filename);
                       
                       //當chunks>1則說明當前傳的文件為一塊碎片，需要合並
                       if (chunks > 1) {
                           //需要創建臨時文件名，最后再更改名稱
                           File tempFile = new File(dir.getPath()+ "/" + multipartFile.getName());
                           //如果chunk==0,則代表第一塊碎片,不需要合並
                           saveUploadFile(multipartFile.getInputStream(), tempFile, chunk == 0 ? false : true);
                           
                           //上傳並合並完成，則將臨時名稱更改為指定名稱
                           if (chunks - chunk == 1) {
                               tempFile.renameTo(targetFile);
                           }
                           
                       } else {
                           //否則直接將文件內容拷貝至新文件
                           multipartFile.transferTo(targetFile);
                       }
                   }
               }
           }
           
       }
       
       /**
        * 保存上傳文件，兼合並功能
        */
       private static void saveUploadFile(InputStream input, File targetFile, boolean append) throws IOException {
           OutputStream out = null;
           try {
               if (targetFile.exists() && append) {
                   out = new BufferedOutputStream(new FileOutputStream(targetFile, true), BUF_SIZE);
               } else {
                   out = new BufferedOutputStream(new FileOutputStream(targetFile), BUF_SIZE);
               }
               
               byte[] buffer = new byte[BUF_SIZE];
               int len = 0;
               //寫入文件
               while ((len = input.read(buffer)) > 0) {
                   out.write(buffer, 0, len);
               }
           } catch (IOException e) {
               throw e;
           } finally {
               //關閉輸入輸出流
               if (null != input) {
                   try {
                       input.close();
                   } catch (IOException e) {
                       e.printStackTrace();
                   }
               }
               if (null != out) {
                   try {
                       out.close();
                   } catch (IOException e) {
                       e.printStackTrace();
                   }
               }
           }
       }
       
       /**
        * 判斷是否全部上傳完成
        * 碎片需合並后才返回真
        */
       public static boolean isUploadFinish(Plupload plupload) {
           return (plupload.getChunks() - plupload.getChunk() == 1);
       }
   
   }

3. controller中的后台處理：

   /**上傳處理方法*/
       @RequestMapping(value="/upload", method = RequestMethod.POST)
       @ResponseBody
       public Map<String,String> upload(Plupload plupload,HttpServletRequest request, HttpServletResponse response) {
           //輸出信息
           System.out.println(plupload.getChunk() + "===" + plupload.getName() + "---" + plupload.getChunks());
           System.out.println("operate="+operate);
           String filename =null;
           plupload.setRequest(request);
           SimpleDateFormat sdf = new SimpleDateFormat("yyyyMM");
           String ymd = sdf.format(new Date());
           
           // 文件保存目錄路徑
           String savePath = plupload.getRequest().getSession().getServletContext().getRealPath("/") + FileDir;
           // 臨時文件目錄
           String tempPath = plupload.getRequest().getSession().getServletContext().getRealPath("/") + TempFileDir;
           Map<String,String> msg = new HashMap<String,String>();
               savePath += "photo/";
               tempPath += "photo/";
                // 創建文件夾
               File dirFile = new File(savePath);
               if (!dirFile.exists())
               {
                   dirFile.mkdirs();
               }
               
               // 創建臨時文件夾
               File dirTempFile = new File(tempPath);
               if (!dirTempFile.exists()){
                   dirTempFile.mkdirs();
               }
   
               System.out.println(dirFile.getPath());
               
               try {
                   //上傳文件
                   filename= PluploadUtil.upload(plupload, dirFile);
                   //判斷文件是否上傳成功（被分成塊的文件是否全部上傳完成）
                   if (PluploadUtil.isUploadFinish(plupload)) {
                       System.out.println(plupload.getName() + "----");
                       System.out.println(savePath+"&&"+filename + "=====");
                       //限制圖片大小不能小於300*300
                       BufferedImage bi = ImageIO.read(new FileInputStream(new File(savePath+filename)));
                       System.out.println("width="+bi.getWidth());
                       System.out.println("height="+bi.getHeight());
                       if(bi.getWidth()<200||bi.getHeight()<200){
                           msg.put("fail", "True");
                           msg.put("error","圖片尺寸不符合要求，大於300*300");
                       }else{
                           //將圖片等比壓縮為300*300大小的圖片
                           IconCompressUtil.compressImg(new File(savePath+filename), 300, new File(savePath+filename));    
                           msg.put("success", "True");
                           msg.put("filename", filename);
                           msg.put("filepath", savePath+"temp"+filename);
                           System.out.println("頭像保存位置="+savePath+"temp"+filename);
                           msg.put("width", bi.getWidth()+"");
                           msg.put("height", bi.getHeight()+"");
                       }
                   }else{
                       msg.put("fail", "True");
                   }
                   
               } catch (IllegalStateException e) {
                   // TODO Auto-generated catch block
                   e.printStackTrace();
               } catch (IOException e) {
                   // TODO Auto-generated catch block
                   e.printStackTrace();
               }
           return msg;
       }

4. jsp頁面

   var uploader = new plupload.Uploader({
           // General settings
           runtimes : 'html5,flash,silverlight,html4',
           browse_button : 'pickfiles', // you can pass in id...
           multi_selection: false,
           container: document.getElementById('container'),
           url : '<%=path%>/upload.do?operate=1',
           chunk_size : '1mb',
           unique_names : true,
           // Resize images on client-side if we can
           //resize : { width : 320, height : 240, quality : 90 },
           filters : {
               max_file_size : '4mb',
   
               // Specify what files to browse for
               mime_types: [
                   {title : "圖片文件", extensions : "jpg,jpeg,gif,png,bmp"}
               ]
           },
    
           flash_swf_url : '<%=path%>/plupload/js/Moxie.swf',
           silverlight_xap_url : '<%=path%>/plupload/js/Moxie.xap',
               init: {
                   FilesAdded: function (up, files) {
                       var count = uploader.files.length;
                       if (count > 1) {
                           art.dialog({ title: '操作提示', width: '24em', height: '10em', content: "一次最多只能上傳一張圖片", icon: 'error', yesFn: function () { return true; } });
                       } else if (count == 0) {
                           art.dialog({ title: '操作提示', width: '24em', height: '10em', content: "沒有要上傳的圖片", icon: 'error', yesFn: function () { return true; } });
                       } else {
                           uploader.start();
                       }
                       return false;
   
                   },
                   UploadProgress: function (up, file) {
                       $("#uploadpercent").show().addClass("cutbox").addClass("cutpic").find("img").eq(0).show().attr("src", "<%=path%>/images/loading_upload.gif");
                       $("#fileName").val(file.name);
                       imgcontainer.hide();
                       },
                  
                   UploadComplete: function (up, file) {
                       if (uploader.total.failed > 0) {
                           //if (confirm("對不起，" + uploader.total.failed + "個文件上傳失敗,是否重新上傳？")) {
                               $("#uploadpercent").hide().removeClass("cutbox").removeClass("cutpic").find("img").eq(0).hide().attr("src", "");
                               alert("UploadComplete");
                               imgcontainer.show();
                               //uploader.start();
                           //} else {
                               uploader.splice();
                               uploader.refresh();
                           //}
                       }
                       else if (uploader.files.length == (uploader.total.uploaded + uploader.total.failed)) {
                           $("#uploadpercent").hide().removeClass("cutbox").removeClass("cutpic").find("img").eq(0).hide().attr("src", "");
                           imgcontainer.show();
                       }
                   },
                   FileUploaded: function (up, file, obj) {
                       var result = eval('(' + obj.response + ')');
                       if (result.success == "True") {
                           uploader.splice();
                           uploader.refresh();
                           $("#headVal").val(result.filename);
                           $("#filepath").val(result.filepath);
                           var imgurl = "<%=path%>/uploadfile/photo/" + result.filename;
                           var maxVal = 0;
                           if (result.width > result.height) {
                               maxVal = result.height;
                           }
                           else {
                              maxVal = result.width;
                           }
                           alert("maxVal="+maxVal);
                           alert("result.width="+result.width);
                           alert("result.height="+result.height);
                             
                           $("#maxVal").val(maxVal);
                           $("#owidth").val(result.width);//result.width
                           $("#oheight").val(result.height);//result.height
                           $("#oper").show();
                           imgcontainer.addClass("cutpic");
                           cutter.reload(imgurl,result.width,result.height);
                           alert("FileUploaded"); 
                       } else {
                       alert(result.error);
                           $("#uploadpercent").hide().removeClass("cutbox").removeClass("cutpic").find("img").eq(0).hide().attr("src", "");
                           imgcontainer.show();
                           uploader.total.failed += 1;
                           uploader.splice();
                           uploader.refresh();
                           art.dialog({ title: '操作提示', width: '24em', height: '10em', content: result.filename, icon: 'error', yesFn: function () { return true; } });
                       }
                   }
               }
           });
           uploader.init();
   

三、圓形切割類CircleCut.java:

public class CircleCut {
    String srcFile ;
    String newFile;
    
    public String getSrcFile() {
        return srcFile;
    }
    public void setSrcFile(String srcFile) {
        this.srcFile = srcFile;
    }
    public String getNewFile() {
        return newFile;
    }
    public void setNewFile(String newFile) {
        this.newFile = newFile;
    }

    public static boolean ImgCircleCut(String srcFile,String newFile){

        try {
            BufferedImage bi1 = ImageIO.read(new File(srcFile));

            // 根據需要是否使用 BufferedImage.TYPE_INT_ARGB
            BufferedImage bi2 = new BufferedImage(bi1.getWidth(), bi1.getHeight(),
                    BufferedImage.TYPE_INT_ARGB);

            Ellipse2D.Double shape = new Ellipse2D.Double(0, 0, bi1.getWidth(), bi1
                    .getHeight());

            Graphics2D g2 = bi2.createGraphics();
            AlphaComposite ac = AlphaComposite.getInstance(AlphaComposite.SRC_OVER, 0.9f);
            g2.setComposite(ac);
            g2.setBackground(new Color(22,2,2,0));
            //-1000000：在編寫這個類時測試發現將此值設為極小值則可切出圓形
            g2.fill3DRect(-1000000, 200, 180, 80,false);
            //g2.fill(new Rectangle(bi2.getWidth(), bi2.getHeight()));
            g2.setClip(shape);
            // 使用 setRenderingHint 設置抗鋸齒
            g2.drawImage(bi1, 0, 0, null);
            g2.dispose();
            ImageIO.write(bi2, "png", new File(newFile));
        } catch (IOException e) {
            // TODO Auto-generated catch block
            e.printStackTrace();
            return false;
        }
        return true;        
    }    
}

四、由於以上圓形切割類CircleCut.java最好是剪切尺寸比例為1:1的圖片，偏離這個比例則會成為橢圓。那么為解決這一問題，我們在上傳頭像后在后台使用圖片處理工具類IconCompressUtil.java切割成固定1:1尺寸的圖片，再調用CircleCut.java。以下為IconCompressUtil.java：

public class IconCompressUtil {
    public String path = "";

    public IconCompressUtil(String path) {
        this.path = path;
    }

    public void change(int size) {
        compressImg(new File(path), size, null);
    }

    /**
     * @param oldfile
     * @param size
     * @param newfile
     * @return
     * @描述 —— 將oldfile的圖片文件等比例壓縮為size的newfile文件
     */

    public static File compressImg(File oldfile, int size, File newfile) {
        if(!newfile.exists())
            try {
                newfile.createNewFile();
            } catch (IOException e1) {
                // TODO Auto-generated catch block
                //e1.printStackTrace();
                System.out.println("無法創建文件！！！");
                return null;
            }
        BufferedImage bi;
        try {
            System.out.println("正在壓縮:" + oldfile.getName());
            bi = ImageIO.read(new FileInputStream(oldfile));
            int width = bi.getWidth();
            int height = bi.getHeight();
            if (width > size || height > size) {
                Image image;
                if (width > height) {
                    height = (int) (bi.getHeight() / (bi.getWidth() * 1d) * size);
                    image = bi.getScaledInstance(size, height,
                            Image.SCALE_DEFAULT);
                } else {
                    width = (int) (bi.getWidth() / (bi.getHeight() * 1d) * size);
                    image = bi.getScaledInstance(width, size,
                            Image.SCALE_DEFAULT);
                }
                ImageIO.write(toBufferedImage(image), "png",
                        new FileOutputStream(newfile));
                System.out.println("壓縮完成:" + newfile.getName());
                return newfile;
            } else {
                System.out.println("無須壓縮:" + oldfile.getName());
                return oldfile;
            }
        } catch (Exception e) {
            e.printStackTrace();
        }
        return null;
    }

    public static BufferedImage toBufferedImage(Image image) {
        if (image instanceof BufferedImage) {
            return (BufferedImage) image;
        }
        image = new ImageIcon(image).getImage();
        BufferedImage bimage = null;
        GraphicsEnvironment ge = GraphicsEnvironment
                .getLocalGraphicsEnvironment();
        try {
            int transparency = Transparency.TRANSLUCENT;
            GraphicsDevice gs = ge.getDefaultScreenDevice();
            GraphicsConfiguration gc = gs.getDefaultConfiguration();
            bimage = gc.createCompatibleImage(image.getWidth(null), image
                    .getHeight(null), transparency);
        } catch (HeadlessException e) {
        }
        if (bimage == null) {
            int type = BufferedImage.TYPE_INT_RGB;
            bimage = new BufferedImage(image.getWidth(null), image
                    .getHeight(null), type);
        }
        Graphics g = bimage.createGraphics();
        g.drawImage(image, 0, 0, null);
        g.dispose();
        return bimage;
    }

    /**
     * @return
     * @描述 —— 生成隨機名字，不可能重復(用於文件的命名)
     */
    public static String getRandomName() {
        Random r = new Random();
        SimpleDateFormat sdf = new SimpleDateFormat("yyyyMMdd_HHmmssSSS");
        StringBuffer sb = new StringBuffer();
        sb.append(r.nextInt(100));
        sb.append(r.nextInt(100));
        sb.append("_");
        sb.append(sdf.format(new Date()));
        sb.append("_");
        sb.append(r.nextInt(100));
        sb.append(r.nextInt(100));
        return sb.toString();
    }

    /**
     * @param inputFile源文件
     * @param outFile生成文件
     * @param width指定寬度
     * @param height指定高度
     * @param proportion是否等比例操作
     * @return
     * @描述 —— 是否等比例縮放圖片
     */
    public static boolean compressPic(String inputFile, String outFile,
            int width, int height, boolean proportion) {
        try {
            // 獲得源文件
            File file = new File(inputFile);
            if (!file.exists()) {
                return false;
            }
            Image img = ImageIO.read(file);
            // 判斷圖片格式是否正確
            if (img.getWidth(null) == -1) {
                return false;
            } else {
                int newWidth;
                int newHeight;
                // 判斷是否是等比縮放
                if (proportion == true) {
                    // 為等比縮放計算輸出的圖片寬度及高度
                    double rate1 = ((double) img.getWidth(null))
                            / (double) width + 0.1;
                    double rate2 = ((double) img.getHeight(null))
                            / (double) height + 0.1;
                    // 根據縮放比率大的進行縮放控制
                    double rate = rate1 > rate2 ? rate1 : rate2;
                    newWidth = (int) (((double) img.getWidth(null)) / rate);
                    newHeight = (int) (((double) img.getHeight(null)) / rate);
                } else {
                    newWidth = width; // 輸出的圖片寬度
                    newHeight = height; // 輸出的圖片高度
                }

                // 如果圖片小於目標圖片的寬和高則不進行轉換
                /*
                 * if (img.getWidth(null) < width && img.getHeight(null) <
                 * height) { newWidth = img.getWidth(null); newHeight =
                 * img.getHeight(null); }
                 */
                BufferedImage tag = new BufferedImage((int) newWidth,
                        (int) newHeight, BufferedImage.TYPE_INT_RGB);

                // Image.SCALE_SMOOTH 的縮略算法 生成縮略圖片的平滑度的,優先級比速度高 生成的圖片質量比較好 但速度慢
                tag.getGraphics().drawImage(
                        img.getScaledInstance(newWidth, newHeight,
                                Image.SCALE_SMOOTH), 0, 0, null);
                FileOutputStream out = new FileOutputStream(outFile);
                // JPEGImageEncoder可適用於其他圖片類型的轉換
                JPEGImageEncoder encoder = JPEGCodec.createJPEGEncoder(out);
                encoder.encode(tag);
                out.close();
            }
        } catch (IOException ex) {
            ex.printStackTrace();
        }
        return true;
    }

    /**
     * @param srcFile源文件
     * @param outFile輸出文件
     * @param x坐標
     * @param y坐標
     * @param width寬度
     * @param height高度
     * @return
     * @描述 —— 裁剪圖片
     */
    public static boolean cutPic(String srcFile, String outFile, int x, int y,
            int width, int height) {
        FileInputStream is = null;
        ImageInputStream iis = null;
        try {
            // 如果源圖片不存在
            if (!new File(srcFile).exists()) {
                return false;
            }

            // 讀取圖片文件
            is = new FileInputStream(srcFile);

            // 獲取文件格式
            String ext = srcFile.substring(srcFile.lastIndexOf(".") + 1);

            // ImageReader聲稱能夠解碼指定格式
            Iterator<ImageReader> it = ImageIO.getImageReadersByFormatName(ext);
            ImageReader reader = it.next();

            // 獲取圖片流
            iis = ImageIO.createImageInputStream(is);

            // 輸入源中的圖像將只按順序讀取
            reader.setInput(iis, true);

            // 描述如何對流進行解碼
            ImageReadParam param = reader.getDefaultReadParam();

            // 圖片裁剪區域
            Rectangle rect = new Rectangle(x, y, width, height);

            // 提供一個 BufferedImage，將其用作解碼像素數據的目標
            param.setSourceRegion(rect);

            // 使用所提供的 ImageReadParam 讀取通過索引 imageIndex 指定的對象
            BufferedImage bi = reader.read(0, param);

            // 保存新圖片
            File tempOutFile = new File(outFile);
            if (!tempOutFile.exists()) {
                tempOutFile.mkdirs();
            }
            ImageIO.write(bi, ext, new File(outFile));
            return true;
        } catch (Exception e) {
            e.printStackTrace();
            return false;
        } finally {
            try {
                if (is != null) {
                    is.close();
                }
                if (iis != null) {
                    iis.close();
                }
            } catch (IOException e) {
                e.printStackTrace();
                return false;
            }
        }
    }

    /**
     * @param doubleValue
     * @return
     * @描述 —— 將浮點型數據保留整數位轉換成int型
     */
    public static Integer getRoundIntFromDouble(Double doubleValue) {
        return Integer.parseInt(String.valueOf(Math.round(doubleValue)));
    }
}

注：1、jsp頁面處理的代碼中包含少量無關代碼，我將繼續修改成通用版。2、此功能第一步是使用Jcrop組件實現圖片預覽，具體如何使用的Jcrop我將寫在下一篇文章里。