基于cropper.js的图片上传和裁剪

项目中要求图片上传并裁剪的功能，之前也有接触过很多图片裁剪插件，效果体验不是很好，今天推荐一款好用的插件-cropper，超级好用，裁剪功能丰富，满足了各种需求。

功能：

1：点击选择图片，弹出文件夹选择桌面 文件
2：选择文件之后，打开编辑图片的页面，开始裁剪图片
插件下载地址：http://www.jq22.com/jquery-info18167

插件描述：croppic图像裁剪将满足您的需求，图像加载效果、展现效果以及裁剪都非常棒，相信看到Demo后一定会喜欢上此插件.

图片.png

图片.png

代码：
1：引入相关的css和js文件,cropper.min.css，ImgCropping.css，cropper.min.js等，文件下载地址：http://www.jq22.com/jquery-info18167

2：具体代码如下：前端部分

    
        
        
        
        
        
        

        
        
    

    
        
         
                    选择图片
         
        

            
        

        
        

            

            

                


                    
×
                

                

                    

                        
                    
                    

                        
图片预览：
                        

                        
                    
                

                

                    复位
                    旋转
                    换向
                    确定
                
            
        
        

        
        
             

    

3：后台Java代码：
利用cropper插件裁剪本地图片，接下来的问题就是将裁剪过后的base64图片上传至后台。

1：去掉base64编码的头部 如："data:image/jpeg;base64," 如果不去，转换的图片不可以查看
2：解码
3：在tomcat目录下创建picture文件夹保存图片
4：判断文件目录是否存在
5：根据系统的不同获取文件路径的分隔符
6：输出文件路径

    package com.debo.cropper;  
      
    import java.io.FileOutputStream;  
    import java.text.SimpleDateFormat;  
    import java.util.Base64;  
    import java.util.Base64.Decoder;  
    import java.util.Date;  
      
    import javax.servlet.http.HttpServletRequest;  
      
    import org.apache.commons.lang.RandomStringUtils;  
    import org.springframework.stereotype.Controller;  
    import org.springframework.web.bind.annotation.RequestMapping;  
    import org.springframework.web.bind.annotation.RequestMethod;  
    import org.springframework.web.bind.annotation.RequestParam;  
    import org.springframework.web.bind.annotation.ResponseBody;  
      
    @Controller  
    @RequestMapping("upload")  
    public class Cropper {  
      
        /**  
         * 注释的代码可以忽略  
         * @throws  
         */  
        @RequestMapping(method = RequestMethod.POST)  
        @ResponseBody  
        public String cropper(@RequestParam("file") String file,  
                HttpServletRequest request) throws Exception {  
              
            Decoder decoder = Base64.getDecoder();  
            // 去掉base64编码的头部 如："data:image/jpeg;base64," 如果不去，转换的图片不可以查看  
            file = file.substring(23);  
                    //解码  
            byte[] imgByte = decoder.decode(file);  
      
            /*//在tomcat目录下创建picture文件夹保存图片  
            String path = request.getSession().getServletContext()  
                    .getRealPath("");  
            String contextPath = request.getContextPath();  
            path = path.replace(contextPath.substring(1), "")  + "picture";  
            File dir = new File(path);  
            if (!dir.exists()) {// 判断文件目录是否存在  
                dir.mkdirs();  
            }  
                    //因为windows和linux路径不同，window：D:\dir   linux:opt/java  
            //System.getProperty("file.separator")能根据系统的不同获取文件路径的分隔符  
            String fileName = getFileName();  
            path = path + System.getProperty("file.separator") + fileName;  
                    */  
              
            try {  
                FileOutputStream out = new FileOutputStream("D:/1.jpg"); // 输出文件路径  
                out.write(imgByte);  
                out.close();  
            } catch (Exception e) {  
                e.printStackTrace();  
            }  
              
            return "success";  
      
            /*String url = request.getScheme() + "://" + request.getServerName()  
                    + ":" + request.getServerPort() + "/picture/" + fileName;  
            return url; */  
        }  
      
        /**  
         * 创建文件名称 内容：时间戳+随机数  
         *   
         * @param @return  
         * @throws  
         */  
        private String getFileName() {  
            SimpleDateFormat sdf = new SimpleDateFormat("yyyyMMddHHmmss");  
            String timeStr = sdf.format(new Date());  
            String str = RandomStringUtils.random(5,  
                    "abcdefghijklmnopqrstuvwxyz1234567890");  
            String name = timeStr + str + ".jpg";  
            return name;  
        }  
      
    }  

RandomStringUtils需要导入依赖

      
        commons-lang  
        commons-lang  
        2.6  
      

原文作者：祈澈姑娘
技术博客：https://www.jianshu.com/u/05f416aefbe1

90后前端妹子，爱编程，爱运营，爱折腾。
坚持总结工作中遇到的技术问题，坚持记录工作中所所思所见，欢迎大家一起探讨交流。