2. 程式人生 > >Java 利用jquery庫cropper完成圖片裁剪功能

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

阿新 • • 發佈：2019-01-17

功能描述：點選使用者頭像，彈出一個圖片裁剪的modal，提交後，java後端儲存裁剪後的圖片，然後返回該圖片url給前端顯示。
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>

相關推薦

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

功能描述：點選使用者頭像，彈出一個圖片裁剪的modal，提交後，java後端儲存裁剪後的圖片，然後返回該圖片url給前端顯示。 Cropper依賴於jquery、bootstrap。 1.Java核心圖片裁剪工具類 ImageCut.java pa

cropper.js圖片裁剪

設置 並且 tip pan 初始 以及 per col com 最近做電子名片的項目，可是個人照片展示上出現了 用戶上傳的圖片尺寸嚴重失調，所以要求進行圖片裁剪，再此我對圖片裁剪進行調研 還不太成熟 以後再改 這個實現的原理是 前臺獲取到 坐標 圖片的尺寸 原圖文件 傳給後

java利用poi新增多張圖片到word

poi提供的方法是有新增圖片到word的，但是並不是相容所有word。所以需要重寫他的方法 第一步，匯入jar <dependency> <groupId>org.apache.poi</grou

利用jquery實現多張圖片淡入淡出

功能描述： 圖片播放分為2個順序：正序和反序，正序就是從第一張到最後一張，然後再第一張，反序是從第一張開始，然後最後一張，再到第一張。 1：當沒有滑鼠操作時，圖片正序播放，每隔特定時間播放一次。 2：如果滑鼠從左向右滑動，則圖片跳過間隔時間，播放順序強制切換為正序，立即播放

利用jquery的contains實現搜索功能

sea clas .sh 搜索功能 display fun != ont 搜索 1 / jquery實現的搜索功能 2 $(‘#search_btn‘).on(‘click‘,function(){ 3 var txt=$(‘#inputVa

使用Layer完成圖片放大功能

file mage 不用 url con html clas wid img 序言：在寫這個功能之前也用了zoom.js，zoom.js用起來簡單引用js然後設置圖片屬性就可以放大。但是放大後的圖片模糊、沒有遮罩、在放大圖片時其它圖片布局會受到影響，當然如果覺得這些都是小問

Android 系統自帶圖片裁剪功能（適配7.0、8.0、對了還有小米手機）

前段時間寫了如何獲取相簿和拍照之後的照片並且進行顯示和上傳，這一次是如何進行圓形影象製作，經常看我寫的筆記的人會知道，我很懶。那麼我就懶的自定義了，目前需求就用原生的就好了，大神的輪子，我會在後面進行推薦。這篇筆記是依賴於：Android呼叫相簿、相機（相容6.0、7.0、8.0） 文

小程式圖片裁剪功能簡易版,分享前裁剪

該檔案主要執行分享前的裁剪 微信後臺的download安全域名別忘記設定,否則上線後不能剪下 小程式內是圖片是HTTP的要想辦法換成https 一.介紹使用 1.基本使用 以商品詳情為例: <template>

Android之圓形頭像（實現相機拍攝+相簿選擇+圖片裁剪功能）

功能實現：點選圓形頭像之後可以實現相簿上傳或者開啟相機，然後把得到的圖片經過剪裁，把剪裁過的圖片設定為頭像的背景圖 步驟：第一步：自定義一個類，繼承ImageView，重寫draw方法，實現外觀為圓形 第二步：在xml檔案中引用該控制元件 第三步：實現圓形頭像的點選事件，點

利用JQuery實現註冊頁面的驗證功能

註冊頁面在網頁前端的設計中，是一個比較重要的模組，本程式渣就用自己薄弱的程式設計技術寫了以下程式碼，供大家參考加批評指正。 本段程式碼還用到了正則表示式。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitiona

基於jQuery和cropper點選頭像上傳並預覽裁剪圖片

使用jquery上傳前，預覽圖片，裁剪，示例使用php接收上傳的檔案，並且儲存為裁剪後的圖片。不需要上傳後再裁剪圖片，只需要本地裁剪好即可，裁剪的時候也可以旋轉圖片。裁剪控制元件使用了，cropper。 html程式碼 <!DOCTYPE html> <html la

【jQuery外掛分享】Cropper——一個簡單方便的圖片裁剪外掛

原文地址：https://segmentfault.com/a/1190000012344970   外掛介紹 這是一個我在寫以前的專案的途中發現的一個國人寫的jQuery影象裁剪外掛，當時想實現使用者資料的頭像上傳功能，並且能夠預覽圖片，和對圖片進行簡單的裁剪、旋轉，花了不少

【jQuery插件分享】Cropper——一個簡單方便的圖片裁剪插件

spa jdk 上傳 bject bootstra box 調整 inf doc 原文:https://segmentfault.com/a/1190000012344970 插件介紹 這是一個我在寫以前的項目的途中發現的一個國人寫的jQuery圖像裁剪插件，當時想實現用戶

java語言下利用tess4j開源庫實現圖片識別功能

一，tess4j 簡單介紹 Tess4J是對tesseract -OCR API.的Java JNA 封裝，使java能夠通過呼叫Tess4J的API來使用tesseract -OCR 我有一篇部落格也介紹了tesseract -OCR如何使用tesseract -OCR進行圖片識別&n

利用jquery的imgAreaSelect外掛實現圖片裁剪示例

原文連結：http://www.cnblogs.com/mizzle/archive/2011/10/13/2209891.html 將使用者上傳的圖片進行裁剪再儲存是現在web2.0應用中常常處理的工作，現在藉助jquery的imgareaselect外掛再配合PHP的G

移動端圖片裁剪上傳—jQuery.cropper.js

The new ++ spec 得到 end ipad 安卓 java jQuery.cropper.js是一款使用簡單且功能強大的圖片剪裁jQuery插件。該圖片剪裁插件支持圖片放大縮小，支持圖片旋轉，支持觸摸屏設備，支持canvas，並且支持跨瀏覽器使用。 一、移動端獲

jquery圖片裁剪外掛cropper

在專案中，需要多上傳的圖片按照比例和尺寸進行裁剪，這類場景在一些CMS系統中是比較常見的，尤其是大部分的文章現在要適配PC、Mobile兩種平臺，文章的封面圖等便需要按照尺寸做裁剪，以便於應用到不同的場景和平臺上。 專案是放在github上 在頁面中引入croppe

簡單圖片裁剪上傳，jsp+servlet+jQuery+Image Cropper（測試）

伺服器 package test; import java.awt.image.BufferedImage; import java.io.ByteArrayInputStream; import java.io.File; import java.io.IOExcept

【轉載】【JAVA秒會技術之圖片上傳】基於Nginx及FastDFS，完成圖片的上傳及展示

相互 沒有 con 性能 ext 存儲服務器 網絡 管理 代理配置 基於Nginx及FastDFS，完成商品圖片的上傳及展示 一、傳統圖片存儲及展示方式 存在問題： 1）大並發量上傳訪問圖片時，需要對web應用做負載均衡，但是會存在圖片共享問題 2）web應

cropper.js實現圖片裁剪預覽並轉換為base64發送至服務端。

urlencode button 圖片 all 完成 r.js borde lan meta 一 、準備工作 1.首先需要先下載cropper,常規使用npm，進入項目路徑後執行以下命令： npm install cropper 2. cropper基於