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我将写在下一篇文章里。