Java實現頭像拖拽擷取裁剪後圖片儲存,獲取的是base64資料,base64資料轉換為圖片後存入到資料庫。並讀取出來。

1.操作過程效果截圖：

• 點選編輯頭像進入頭像上傳頁面

  

• 頭像上傳頁面

  

• 點選選擇圖片，選擇需要上傳的圖片進行拖拽裁剪

  

• 裁剪後的圖片進行儲存

  

• 儲存後的圖片存入資料庫，存入本地資料夾

  

  

2.需要的材料(html, js ,css)，太多了我就不發出了，我這個也是下載那個然後自己修改的。下面是靜態Demo頁面的下載地址。

• 百度頭像裁剪擷取拖拽也可以找到：

  

• 下載後內容：

  

3.開啟靜態頁面，對頁面做簡單的修改。

• 新增一個textarea文字域用來存取base64資料。

    <div id="text">
            <textarea rows="10" cols="100"></textarea>
    </div>

• js新增兩行: alert()用來測試，textarea用來存取base64資料。

    alert(cropper.getDataURL());
    $('#text textarea').val(cropper.getDataURL());

• 選擇圖片，測試：頁面texteare已經獲取。
  

4.將Js,css，html 加入 Java Web裡面。頁面加入form 表單，點選儲存時，把texteare的base64資料提交到controller控制器裡面進行base64資料轉為圖片，並儲存到資料庫和本地。

• jsp頁面修改。

  

• 建一個base64資料格式和圖片相互轉換的base64類。（重要）

package com.ssm.jock.utils;

import java.io.FileInputStream;
import java.io.FileOutputStream;  
import java.io.IOException;  
import java.io.InputStream;  
import java.io.OutputStream;  

import sun.misc.BASE64Decoder;  
import sun.misc.BASE64Encoder;  

public
 
 class Base64
{  
    //圖片轉化成base64字串  
    public static String GetImageStr(String imageName)  
    {//將圖片檔案轉化為位元組陣列字串，並對其進行Base64編碼處理  
        String imgFile = imageName;//待處理的圖片  
        InputStream in = null;  
        byte[] data = null;  
        //讀取圖片位元組陣列  
        try   
        {  
            in = new FileInputStream(imgFile);          
            data = new byte[in.available()];  
            in.read(data);  
            in.close();  
        }   
        catch (IOException e)   
        {  
            e.printStackTrace();  
        }  
        //對位元組陣列Base64編碼  
        BASE64Encoder encoder = new BASE64Encoder();  
        return encoder.encode(data);//返回Base64編碼過的位元組陣列字串  
    }  



    //base64字串轉化成圖片  
    public static boolean GenerateImage(String imgStr,String imageName)  
    {   //對位元組陣列字串進行Base64解碼並生成圖片  
        if (imgStr == null) //影象資料為空  
            return false;  
        BASE64Decoder decoder = new BASE64Decoder();  
        try   
        {  
            //Base64解碼  
            byte[] b = decoder.decodeBuffer(imgStr);  
            for(int i=0;i<b.length;++i)  
            {  
                if(b[i]<0)  
                {//調整異常資料  
                    b[i]+=256;  
                }  
            }  
            //生成jpeg圖片  
            String imgFilePath = imageName;//新生成的圖片  
            OutputStream out = new FileOutputStream(imgFilePath);      
            out.write(b);  
            out.flush();  
            out.close();  
            return true;  
        }   
        catch (Exception e)   
        {  
            return false;  
        }  
    }  
}  

• 控制器程式碼：

/**
     * 根據Id獲取該使用者的頭像並刪除
     * 獲取base64資料的圖片資料，轉為圖片格式存入指定資料夾裡面
     * @param buyerMess 使用者物件
     * @param text base64資料
     * @param request
     * @return
     * @throws Exception
     */
    @RequestMapping("/updateUserMess")
    public String updatePhotoUrl(
            BuyerMess buyerMess, 
            String text,
            Model model,
            HttpServletRequest request) throws Exception{
            //輸出base64 資料,擷取","之後的值進行轉換
            String str = text.substring(text.indexOf(",")+1);
            //System.currentTimeMillis()意思是獲取當前系統的時間戳給圖片命名
            //例項化Base64轉換類  呼叫裡面的GenerateImage方法（把base64資料轉為圖片）
            //第一個引數base64轉圖片的必須的base64資料，第二個是轉換後生成的圖片存放路徑
            Base64.GenerateImage(str, "D:/images/user_head/"+System.currentTimeMillis()+".jpg");
            //資料庫存入絕對路徑下的圖片名稱（上傳圖片即是修改操作）
            buyerMess.setPhotourl("D:/images/user_head/"+System.currentTimeMillis()+".jpg");
            buyerMess.setId("zhangsan");
            //根據使用者Id修改頭像圖片存的路徑
            Integer ret = buyerMessService.updatePhotoUrl(buyerMess);
            if(ret>0){
                System.out.println("存入成功");
            }else{
                System.out.println("存入失敗");
            }
        //呼叫查詢方法，返回到頁面
        return "redirect:/first.htm";
    }

4.為什麼需要擷取：因為獲取的base64資料不能識別前面帶“data:image/png;base64,”的。把這個擷取後才能被識別，否則生成不了。

• 設定斷點，滑鼠懸浮到text上面，可以看到下面的base64資料已經傳入此方法裡面了。

  

• 對base64資料進行擷取。（把“，”號之前的data:image/png;base64, 擷取掉，只需要後面的資料才能轉換）

  

5.總結：其實看上去很多，實際很簡單。大致分為5步。

• 把前臺獲取的base64資料傳入後臺。
• 把獲取的base64資料進行擷取，只需要“，”逗號之後的資料才能轉換。
• 建立base64轉換的類，用於把base64資料轉為圖片。
• 呼叫base64資料轉換為圖片的方法，引數（base64資料，圖片儲存地址）。
• 設定資料庫的圖片路徑為圖片儲存路徑。