Java 利用jquery庫cropper完成圖片裁剪功能

功能描述：點擊用戶頭像，彈出一個圖片裁剪的modal，提交後，java後端保存裁剪後的圖片，然後返回該圖片url給前端顯示。Cropper官網及下載
Cropper依賴於jquery、bootstrap。

1.Java核心圖片裁剪工具類 ImageCut.java

package com.jykj.demo.util;

import java.io.*;  
import java.awt.*;  
import java.awt.image.*;  
import java.awt.Graphics;  
import java.awt.color.ColorSpace;  
import javax.imageio.ImageIO;  

public class ImageCut {  

    /**  
     * 圖像切割（改）     *  
     * @param srcImageFile            源圖像地址 
     * @param dirImageFile            新圖像地址 
     * @param x                       目標切片起點x座標 
     * @param y                      目標切片起點y座標 
     * @param destWidth              目標切片寬度 
     * @param destHeight             目標切片高度 
     */  
    public static void abscut(String srcImageFile,String dirImageFile, int x, int y, int destWidth,  
            int destHeight) {  
        try {  
            Image img;  
            ImageFilter cropFilter;  
            // 讀取源圖像  
            BufferedImage bi = ImageIO.read(new File(srcImageFile));  
            int srcWidth = bi.getWidth(); // 源圖寬度  
            int srcHeight = bi.getHeight(); // 源圖高度            
            if (srcWidth >= destWidth && srcHeight >= destHeight) {  
                Image image = bi.getScaledInstance(srcWidth, srcHeight,  
                        Image.SCALE_DEFAULT);  
                // 改進的想法:是否可用多線程加快切割速度  
                // 四個參數分別爲圖像起點座標和寬高  
                // 即: CropImageFilter(int x,int y,int width,int height)  
                cropFilter = new CropImageFilter(x, y, destWidth, destHeight);
                img = Toolkit.getDefaultToolkit().createImage(  
                        new FilteredImageSource(image.getSource(), cropFilter));  
                BufferedImage tag = new BufferedImage(destWidth, destHeight,  
                        BufferedImage.TYPE_INT_RGB);  
                Graphics g = tag.getGraphics();  
                g.drawImage(img, 0, 0, null); // 繪製縮小後的圖  
                g.dispose();  
                // 輸出爲文件  
                ImageIO.write(tag, "JPEG", new File(dirImageFile));  
            }  
        } catch (Exception e) {  
            e.printStackTrace();  
        }  
    }  
    public static void cut(InputStream is,File dirImageFile, int x, int y, int destWidth,  
            int destHeight) throws IOException {  
        cut(ImageIO.read(is),dirImageFile,x,y,destWidth,destHeight);
    }  
    public static void cut(BufferedImage bi,File dirImageFile, int x, int y, int destWidth,  
            int destHeight) {  
        try {  
            Image img;  
            ImageFilter cropFilter;  
            // 讀取源圖像  
            int srcWidth = bi.getWidth(); // 源圖寬度  
            int srcHeight = bi.getHeight(); // 源圖高度            
            if (srcWidth >= destWidth && srcHeight >= destHeight) {  
                Image image = bi.getScaledInstance(srcWidth, srcHeight,  
                        Image.SCALE_DEFAULT);  
                // 改進的想法:是否可用多線程加快切割速度  
                // 四個參數分別爲圖像起點座標和寬高  
                // 即: CropImageFilter(int x,int y,int width,int height)  
                cropFilter = new CropImageFilter(x, y, destWidth, destHeight);
                img = Toolkit.getDefaultToolkit().createImage(  
                        new FilteredImageSource(image.getSource(), cropFilter));  
                BufferedImage tag = new BufferedImage(destWidth, destHeight,  
                        BufferedImage.TYPE_INT_RGB);  
                Graphics g = tag.getGraphics();  
                g.drawImage(img, 0, 0, null); // 繪製縮小後的圖  
                g.dispose();  
                // 輸出爲文件  
                ImageIO.write(tag, "JPEG", dirImageFile);  
            }  
        } catch (Exception e) {  
            e.printStackTrace();  
        }  
    }   
    /** 
     * 縮放圖像 
     *  
     * @param srcImageFile       源圖像文件地址 
     * @param result             縮放後的圖像地址 
     * @param scale              縮放比例 
     * @param flag               縮放選擇:true 放大; false 縮小; 
     */  
    public static void scale(String srcImageFile, String result, int scale,  
            boolean flag) {  
        try {  
            BufferedImage src = ImageIO.read(new File(srcImageFile)); // 讀入文件  
            int width = src.getWidth(); // 得到源圖寬  
            int height = src.getHeight(); // 得到源圖長  
            if (flag) {  
                // 放大  
                width = width * scale;  
                height = height * scale;  
            } else {  
                // 縮小  
                width = width / scale;  
                height = height / scale;  
            }  
            Image image = src.getScaledInstance(width, height,Image.SCALE_DEFAULT);  
            BufferedImage tag = new BufferedImage(width, height,BufferedImage.TYPE_INT_RGB);  
            Graphics g = tag.getGraphics();  
            g.drawImage(image, 0, 0, null); // 繪製縮小後的圖  
            g.dispose();  
            ImageIO.write(tag, "JPEG", new File(result));// 輸出到文件流  
        } catch (IOException e) {  
            e.printStackTrace();  
        }  
    }  

    /** 
     * 重新生成按指定寬度和高度的圖像 
     * @param srcImageFile       源圖像文件地址 
     * @param result             新的圖像地址 
     * @param _width             設置新的圖像寬度 
     * @param _height            設置新的圖像高度 
     */  
    public static void scale(String srcImageFile, String result, int _width,int _height) {        
        scale(srcImageFile,result,_width,_height,0,0);  
    }  

    public static void scale(String srcImageFile, String result, int _width,int _height,int x,int y) {  
        try {  

            BufferedImage src = ImageIO.read(new File(srcImageFile)); // 讀入文件  

            int width = src.getWidth(); // 得到源圖寬  
            int height = src.getHeight(); // 得到源圖長  

            if (width > _width) {  
                 width = _width;  
            }  
            if (height > _height) {  
                height = _height;  
            }             
            Image image = src.getScaledInstance(width, height,Image.SCALE_DEFAULT);  
            BufferedImage tag = new BufferedImage(width, height,BufferedImage.TYPE_INT_RGB);  
            Graphics g = tag.getGraphics();  
            g.drawImage(image, x, y, null); // 繪製縮小後的圖  
            g.dispose();              
            ImageIO.write(tag, "JPEG", new File(result));// 輸出到文件流  
        } catch (IOException e) {  
            e.printStackTrace();  
        }  
    }  

    /** 
     * 圖像類型轉換 GIF->JPG GIF->PNG PNG->JPG PNG->GIF(X) 
     */  
    public static void convert(String source, String result) {  
        try {  
            File f = new File(source);  
            f.canRead();  
            f.canWrite();  
            BufferedImage src = ImageIO.read(f);  
            ImageIO.write(src, "JPG", new File(result));  
        } catch (Exception e) {  
            e.printStackTrace();  
        }  
    }  

    /** 
     * 彩色轉爲黑白 
     *  
     * @param source 
     * @param result 
     */  
    public static void gray(String source, String result) {  
        try {  
            BufferedImage src = ImageIO.read(new File(source));  
            ColorSpace cs = ColorSpace.getInstance(ColorSpace.CS_GRAY);  
            ColorConvertOp op = new ColorConvertOp(cs, null);  
            src = op.filter(src, null);  
            ImageIO.write(src, "JPEG", new File(result));  
        } catch (IOException e) {  
            e.printStackTrace();  
        }  
    }     
}

2. Java後端圖片裁剪處理(Controller)

//圖片裁剪功能
    @RequestMapping(value = "/imgCut.do",method = RequestMethod.POST, produces="text/html;charset=utf-8")  
    @ResponseBody
    public String profile_imgCut(MultipartFile avatar_file,String avatar_src,String avatar_data, HttpServletRequest request, Model model) {
        String dir = ConfigInfo.resources_upload_path;
        String path = request.getSession().getServletContext().getRealPath(dir);  

        String name = avatar_file.getOriginalFilename();
        //判斷文件的MIMEtype
        String type = avatar_file.getContentType();
        if(type==null || !type.toLowerCase().startsWith("image/")) return  JSON.toJSONString(new Result(false,"不支持的文件類型，僅支持圖片！"));
        System.out.println("file type:"+type);
        String fileName = new Date().getTime()+""+new Random().nextInt(10000)+"_"+name.substring(name.lastIndexOf('.'));
        System.out.println("文件路徑："+path+":"+fileName); 

        JSONObject joData = (JSONObject) JSONObject.parse(avatar_data);
          // 用戶經過剪輯後的圖片的大小  
        float x = joData.getFloatValue("x");
        float y = joData.getFloatValue("y");
        float w =  joData.getFloatValue("width");
        float h =  joData.getFloatValue("height");

        //開始上傳
        File targetFile = new File(path, fileName);
        //保存  
        try {  
            if(!targetFile.exists()){  
                targetFile.mkdirs();  
                InputStream is = avatar_file.getInputStream();
                ImageCut.cut(is, targetFile, (int)x,(int)y,(int)w,(int)h);  
                is.close();
            }  
        } catch (Exception e) {  
            e.printStackTrace();  
            return  JSON.toJSONString(new Result(false,"上傳失敗，出現異常："+e.getMessage()));
        }  
        return  JSON.toJSONString(new Result(true,"上傳成功!",request.getSession().getServletContext().getContextPath()+dir+fileName));
    }

3. 前端form提交（test.html）

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>TEST</title>
  <!-- Tell the browser to be responsive to screen width -->
  <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
  <link rel="stylesheet" href="${request.contextPath}/resources/bootstrap/css/bootstrap.min.css">
  <link rel="stylesheet" href="${request.contextPath}/resources/cropper/cropper.min.css"/>
  <link rel="stylesheet" href="${request.contextPath}/resources/cropper/crop-avatar/css/main.css"/>
</head>
<body>
 <div class="container" id="crop-avatar">
    <!-- Current avatar -->
    <div class="avatar-view" title="Change the avatar">
      <img src="${request.contextPath}/resources/cropper/crop-avatar/img/picture.jpg" alt="Avatar">
    </div>

    <!-- Cropping modal -->
    <div class="modal fade" id="avatar-modal" aria-hidden="true" aria-labelledby="avatar-modal-label" role="dialog" tabindex="-1">
      <div class="modal-dialog modal-lg">
        <div class="modal-content">
          <form class="avatar-form" action="imgCut.do" enctype="multipart/form-data" method="post" accept="image/*">
            <div class="modal-header">
              <button type="button" class="close" data-dismiss="modal">&times;</button>
              <h4 class="modal-title" id="avatar-modal-label">Change Avatar</h4>
            </div>
            <div class="modal-body">
              <div class="avatar-body">

                <!-- Upload image and data -->
                <div class="avatar-upload">
                  <input type="hidden" class="avatar-src" name="avatar_src">
                  <input type="hidden" class="avatar-data" name="avatar_data">
                  <label for="avatarInput" class="btn btn-primary">選擇圖片</label>
                  <input type="file" class="avatar-input" id="avatarInput" name="avatar_file" style="display: none;" accept="image/*">
                </div>

                <!-- Crop and preview -->
                <div class="row">
                  <div class="col-md-9">
                    <div class="avatar-wrapper"></div>
                  </div>
                  <div class="col-md-3">
                    <div class="avatar-preview preview-lg"></div>
                    <div class="avatar-preview preview-md"></div>
                    <div class="avatar-preview preview-sm"></div>
                  </div>
                </div>

                <div class="row avatar-btns">
                  <div class="col-md-9">
                    <div class="btn-group">
                      <button type="button" class="btn btn-primary" data-method="rotate" data-option="-90" title="Rotate -90 degrees">Rotate Left</button>
                      <button type="button" class="btn btn-primary" data-method="rotate" data-option="-15">-15deg</button>
                      <button type="button" class="btn btn-primary" data-method="rotate" data-option="-30">-30deg</button>
                      <button type="button" class="btn btn-primary" data-method="rotate" data-option="-45">-45deg</button>
                    </div>
                    <div class="btn-group">
                      <button type="button" class="btn btn-primary" data-method="rotate" data-option="90" title="Rotate 90 degrees">Rotate Right</button>
                      <button type="button" class="btn btn-primary" data-method="rotate" data-option="15">15deg</button>
                      <button type="button" class="btn btn-primary" data-method="rotate" data-option="30">30deg</button>
                      <button type="button" class="btn btn-primary" data-method="rotate" data-option="45">45deg</button>
                    </div>
                  </div>
                  <div class="col-md-3">
                    <button type="submit" class="btn btn-primary btn-block avatar-save">Done</button>
                  </div>
                </div>
              </div>
            </div>
            <!-- <div class="modal-footer">
              <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div> -->
          </form>
        </div>
      </div>
    </div><!-- /.modal -->

    <!-- Loading state -->
    <div class="loading" aria-label="Loading" role="img" tabindex="-1"></div>
  </div>
<!-- jQuery -->
<script src="${request.contextPath}/resources/plugins/jQuery/jquery-2.2.4.min.js"></script>
<script src="${request.contextPath}/resources/bootstrap/js/bootstrap.min.js"></script>
<script src="${request.contextPath}/resources/cropper/cropper.min.js"></script>
<script src="${request.contextPath}/resources/cropper/crop-avatar/js/main.js"></script>
</body>
</html>

注意：從Cropper官網上下載下來後，在examples目錄下有一個示例crop-avatar,將其中的main.css以及main.js複製到你的項目中，Cropper是依賴於jquery以及bootstrap的，所以也要把相應的css和js引進來。

4. 頁面展示效果

點擊頭像，彈出modal。點擊Done提交form後生成目標裁剪圖片保存到服務器，並返回給頁面顯示。

5.配置文件上傳

由於上面圖片裁剪涉及到圖片上傳，所以需要配置Spring支持文件上傳功能。

5.1 依賴的jar

<!-- https://mvnrepository.com/artifact/commons-fileupload/commons-fileupload -->
        <dependency>
            <groupId>commons-fileupload</groupId>
            <artifactId>commons-fileupload</artifactId>
            <version>1.3.1</version>
        </dependency>

5.2 在Spring配置文件中添加文件上傳支持

<!-- 支持上傳文件 -->  
    <bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver"/>

6. 說明

Cropper 使用的是html5的一個新特性（FormData）來提交表單，在其main.js文件中有這樣一行代碼：

var data = new FormData(this.$avatarForm[0]);

這本質上也就是對錶單進行了序列化。Cropper同時也支持旋轉，只是在後臺處理旋轉會比較麻煩點。
前端form提交的數據有 :avatar_file(源文件),avatar_data(裁剪參數JSON)，如下通過FormData序列化後所提交的form的數據，後臺控制器參數名只要對上就可以了：

------WebKitFormBoundaryx52DDecBJ0KiNHRY
Content-Disposition: form-data; name="avatar_src"


------WebKitFormBoundaryx52DDecBJ0KiNHRY
Content-Disposition: form-data; name="avatar_data"

{"x":76.49999999999999,"y":22.000000000000007,"height":176.00000000000003,"width":176.00000000000003,"rotate":0}
------WebKitFormBoundaryx52DDecBJ0KiNHRY
Content-Disposition: form-data; name="avatar_file"; filename="3.jpg"
Content-Type: image/jpeg


------WebKitFormBoundaryx52DDecBJ0KiNHRY--

另外Result是自定義的類，很簡單：

public class Result {
    private boolean success;
    private String info;
    private Object data;//也可用來標識錯誤代碼
    ...  此處省略get和set方法
}

用到的JSON，當然可以用其他的JSON的jar包：

<dependency>
  <groupId>com.alibaba</groupId>
    <artifactId>fastjson</artifactId>
    <version>1.2.12</version>
</dependency>

參考：jQuery與Java實現圖片的剪切

Java 利用jquery庫cropper完成圖片裁剪功能

1.Java核心圖片裁剪工具類 ImageCut.java

2. Java後端圖片裁剪處理(Controller)

3. 前端form提交（test.html）

4. 頁面展示效果

5.配置文件上傳

5.1 依賴的jar

5.2 在Spring配置文件中添加文件上傳支持

6. 說明

Java zip壓縮

後臺管理框架搭建

Part 1 ——ActiveMQ 概述

Android 二維碼被掃後接收通知(使用MQTT協議實現消息推送)

Android 根據應用前後臺狀態播放(或暫停)背景音樂

Mac下配置sublime實現LaTeX

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結