基於SpringBoot的圖片上傳元件，實現圖片裁剪、Thumbnailator壓縮的功能

本週三、週四、週五封裝了一個基於SpringBoot的圖片上傳元件。功能流程如下：

1、前臺頁面有一個“選擇檔案”按鈕，點選選擇一張圖片後，在前臺介面進行顯示。

2、雙擊顯示出來的圖片，前臺使用cropper圖片裁剪外掛，將裁剪資訊（裁剪起始點座標 x，y，裁剪寬度width，裁剪高度height）以及上傳的圖片檔案，傳給後臺。

3、後臺對圖片進行裁剪，再將裁剪後的圖片進行壓縮，把原圖路徑、裁剪後圖片路徑、壓縮後圖片路徑、base64編碼存入資料庫。（同時後臺將這三種圖片儲存到本地 D:/images/ 路徑下）

4、後臺將壓縮後的圖片路徑傳給前臺。

5、前臺接收到這個路徑，在頁面上進行顯示。由於此時顯示的是壓縮的圖片，如果使用者想看原圖（裁剪後圖片的原圖），點選該圖片，攜帶這個圖片路徑請求後臺介面。

6、後臺接收到壓縮圖片路徑，select資料庫，找到裁剪後圖片路徑，返回給前臺。

7、前臺接收到這個原圖片路徑，在頁面進行顯示。

一、SpringBoot自定義靜態資源對映

將一些動態維護的檔案，放在伺服器磁碟的某個目錄下（專案目錄之外），並且通過SpringBoot服務進行訪問。

實現類繼承WebMvcConfigurerAdapter並重寫方法addResourceHandlers，將磁碟上檔案存放的絕對路徑對映，就可以通過訪問SpringBoot服務來訪問檔案了。

@Configuration
public class WebAppConfig extends WebMvcConfigurerAdapter {
@Override
public void addResourceHandlers(ResourceHandlerRegistry registry) {
registry.addResourceHandler("/myImages/**").addResourceLocations("file:D:/images/");
super.addResourceHandlers(registry);
}
}

這樣就將D盤上的images目錄對映到myImages路徑下，這個 myImages 是隨意的一個命名。
假如在D盤images目錄下有一個test.jpg圖片，那麼通過訪問 http://localhost:8080/myImages/test.jpg

就可以訪問到該圖片了。

二、Java實現圖片裁剪、使用Thumbnailator工具對圖片進行壓縮。

height。

1、controller層程式碼：

/**
* 影象切割(按指定起點座標和寬高切割)
* @param file 源影象檔案
* @param x 目標切片起點座標X
* @param y 目標切片起點座標Y
* @param width 目標切片寬度
* @param height 目標切片高度
*/
@RequestMapping(value = "/cutImage", method = RequestMethod.POST, headers = "Accept=application/json")
@ResponseBody
public HttpResponseEntity cutImage(MultipartFile file,
int x, int y, int width, int height) {
HttpResponseEntity httpResponseEntity = new HttpResponseEntity();
try {
String strResult = imgUploadService.cutImage(file, x, y, width, height);
httpResponseEntity.setMessage("成功");
httpResponseEntity.setCode("200");
httpResponseEntity.setData(strResult);
} catch (Exception e) {
e.printStackTrace();
httpResponseEntity.setCode("602");
httpResponseEntity.setMessage("失敗");
}
return httpResponseEntity;
}

2、service層程式碼：

在本方法中使用uuid為圖片重新命名。

在本方法中實現了對圖片的裁剪、等比例壓縮。此處壓縮使用的是Thumbnailator工具，壓縮質量很高。但是按照

Thumbnails.of(new_path_img)
        .scale(1f)//圖片長寬大小
.outputQuality(0.1f)//圖片質量
.toFile(compress_img_path);

這個方法實現的壓縮，記憶體大小依舊很大。

@Override
/**
* @param srcFile原始檔
* @param outFile輸出檔案
* @param x座標
* @param y座標
* @param width寬度
* @param height高度
* @描述 —— 裁剪圖片
*/
public String cutImage(MultipartFile file, int x, int y, int width, int height) throws IOException {
//得到上傳時的檔名
String filename = file.getOriginalFilename();
//獲取檔案字尾名
String suffixName = filename.substring(filename.lastIndexOf("."));
//獲取uuid作為檔名
String name = UUIDUtil.getOneUUID();
filename = name + suffixName;
//儲存地址
String filePath = "D:/images/";
//圖片路徑
String path_img = filePath + filename;
File dest = new File(path_img);
if (!dest.getParentFile().exists()) {
dest.getParentFile().mkdirs();
}
try {
file.transferTo(dest);
} catch (IOException e) {
e.printStackTrace();
}
ImgUploadEntity imgUploadEntity = new ImgUploadEntity();
imgUploadEntity.setImgPath(filename);
FileInputStream is = null;
ImageInputStream iis = null;
try {
// 如果源圖片不存在
if (!new File(path_img).exists()) {
return"失敗";
}
// 讀取圖片檔案
is = new FileInputStream(path_img);
// 獲取檔案格式
String ext = path_img.substring(path_img.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);
// 儲存新圖片
String name1 = UUIDUtil.getOneUUID();
String newFileName = name1 + suffixName;
String new_path_img = filePath + newFileName;
File tempOutFile = new File(new_path_img);
if (!tempOutFile.exists()) {
tempOutFile.mkdirs();
}
ImageIO.write(bi, ext, tempOutFile);
imgUploadEntity.setNewImgPath(newFileName);
//為壓縮後圖片建立路徑
String compressImgPath = UUIDUtil.getOneUUID() + suffixName;
String compress_img_path = filePath + compressImgPath;
//等比壓縮圖片，使用Java
// boolean flag = compressImg(new_path_img, compress_img_path,100,100,true);
/*
* 壓縮圖片，使用Thumbnails工具
* 先判斷圖片大小，如果小於50 kb（51200位元組）不進行壓縮
* file.length()方法最大隻能獲取2g的檔案大小，但是前臺傳給後臺圖片最大為10M，所以此處不必擔心
*/
if(tempOutFile.length() < 51200){

相關推薦

基於SpringBoot的圖片上傳元件，實現圖片裁剪、Thumbnailator壓縮的功能

本週三、週四、週五封裝了一個基於SpringBoot的圖片上傳元件。功能流程如下：1、前臺頁面有一個“選擇檔案”按鈕，點選選擇一張圖片後，在前臺介面進行顯示。2、雙擊顯示出來的圖片，前臺使用cropper圖片裁剪外掛，將裁剪資訊（裁剪起始點座標 x，y，裁剪寬度width，裁

vue圖片上傳元件，包括base64、二進位制上傳及圖片旋轉

最近做的vue專案中好多涉及到圖片上傳的，為了方便開發就進行了相關總結。因為公司有好多專案，並且使用的是不同後臺語言，有的需要通過base64字串傳遞，有的需要轉換成二進位制資料流傳遞，有的可以直接使用from表單進行提交。後來有涉及到ios上拍照圖片會旋轉的問

頁面圖片上傳前，讓圖片在頁面顯示

記錄是為了更好的成長！ 1、程式碼示例（顯示並判斷圖片大小和格式） <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g

Ueditor自定義圖片上傳路徑，以及圖片回顯路徑

最近發現Ueditor有個小bug，每次圖片都上傳到專案路徑下，當重新發佈一個版本後，圖片就沒了，所以決心修改結構如下：1. 首先，進入config.json,修改如下：其他的都不改，只改選中部分，這個是圖片訪問路徑字首我們要關注的是【檔案訪問路徑】和【檔案上傳路徑】然後，分

移動端Vue.js的圖片預覽元件，實現放縮、滑動功能的參考

https://segmentfault.com/a/1190000013193690 segmentfault網址http://www.ml-ui.com/#/docs/i-view ml-ui的vue框架https://www.cnblogs.com/Ed

基於“formData批量上傳的多種實現” 的多圖片預覽、上傳的多種實現 formData批量上傳的多種實現

　　前言　　圖片上傳是web專案常見的需求，我基於之前的部落格的程式碼（請戳：formData批量上傳的多種實現）裡的第三種方法實現多圖片的預覽、上傳，並且支援三種方式新增圖片到上傳列表：選擇圖片、複製貼上圖片、滑鼠拖拽圖片，同時支援從上傳列表中移除圖片（點選“X”號）　　　　效果演示　　選擇

JSP使用ckfinder實現中文圖片上傳後，無法顯示，主要是tomcat不支援中文路徑

在前面實現的圖片上傳時，如果上傳的中文路徑圖片，則無法顯示；主要原因tomcat伺服器預設 ISO-8859-1，不支援中文路徑，需要修改Tomcat\conf下的server.xml

CKEditor實現圖片上傳,並且回調圖片路徑

js文件文件上傳 hid class mode 兩種方法 review 重名 action CKEditor編輯器的工具欄中初始的時候應該是這樣子的，沒有圖片上傳按鈕並且預覽中有一堆火星文，可以修改相應配置刪除它。第一種方法：打開ckeditor/plugins/im

thymeleaf + easy + springboot 檔案上傳下載，以及列表展示介面

這裡只是隨便寫寫，如果有大佬看到請不要噴我。上傳下載在上一篇部落格裡面有寫到我就不在描述了，這裡我只是寫一下我的思路。首先可以讓程式碼可以複用起來這裡用到的是 thymeleaf的include標籤。檔案列表 <!-- 這裡是檔案列表只需要放在需要顯示檔案

圖片上傳元件webuploader

前端元件webuploader 當時也是搞了很久參考這種demo，但是沒記、現在事後大致總結下。直接上大概程式碼（我使用asp.net MVC來做的）：執行順序：（get）Record/Add——Add.cshtml頁面，點選確認上傳執行上傳圖片，可多選——（post）Pho

怎麼簡便地去掉html中難看的檔案上傳按鈕並實現圖片預覽功能？

問題描述通常的檔案上傳按鈕是這樣的：選擇了檔案過後是這樣的：很顯然，這樣的按鈕並不好看。解決方法用一個label標籤來裝載樣式，其for屬性指向type=file的inp

Ionic—圖片上傳元件開發

一.修改頭像功能頁面的整體結構講解 1.安裝必要的元件使用原生的功能時將採用ionic native 安裝四個外掛 npm install --save @ionic-native/camera @ionic-native/file @ionic-n

Java-Maven專案引入UEditor圖片上傳元件jar包類庫的5種方式

專案用Maven管理jar包，用到了UEditor的jar包。專案原來直接使用UEditor的原始碼，編譯部署後，正常。後來用的是jar包，放到WEB-INF目錄的lib包下，預設情況下，Maven不會把lib包加入到Classpath中，需要手動加入。線上Maven

vue 圖片上傳元件（簡單封裝）

import {getUploadImg,saveUploadImg,removeUploadImg} from "../../util/tool/home" export default { props:["orderId",'skuId'] , data(

基於SpringBoot開發一個Restful服務，實現增刪改查功能

ner github上 epo column dex typealias odin 開發人員 java 在去年的時候，在各種渠道中略微的了解了SpringBoot，在開發web項目的時候是如何的方便、快捷。但是當時並沒有認真的去學習下，畢竟感覺自己在Struts和Spr

Vue2.0圖片上傳及圖片壓縮自定義H5圖片上傳元件

最近公司要求圖片上傳需要壓縮，以前直接使用元件不能滿足使用了，於是決定自定義個圖片上傳元件。可以實現動態傳入url，設定壓縮率，接收回傳引數。壓縮也質量還不錯。先上效果圖效果如下壓縮質量還不錯，4.37M到550k 壓縮率更是達到了87% ，這省了不少流量和伺服器硬碟啊，哈

多圖片上傳預覽實現以及移動端web多檔案上傳

注：先寫下兩個點，等空下來再上程式碼~ 1.多圖片上傳預覽，且可對圖片進行編輯可對 input[type=file] 物件獲取 obj.files 獲取 FileList，但為只讀模式，不可寫。

圖片上傳大小，型別，寬高驗證

谷歌瀏覽器測試通過 form表單 <form id="satmpdefForm" action="http://localhost:8080/mainWeb/system/saveStampd

CKEditor圖片上傳的PHP實現

編輯文章是網站後臺的常用功能，CKEditor是目前流行的富文字編輯器，它使用方便但要做一些配置才能實現上傳本地圖片到伺服器的功能。在參考了一篇java下CKEditor圖片上傳的博文後，我用PHP實現了CKEditor編輯文章並支援上傳本地圖片的功能。從官網http:/

React Ant Design UI 圖片上傳元件程式碼片段

使用者可以上傳圖片並在列表中顯示縮圖。當上傳照片數到達限制後，上傳按鈕消失。 import { Upload, Icon, Modal } from 'antd'; class Pictures

基於SpringBoot的圖片上傳元件，實現圖片裁剪、Thumbnailator壓縮的功能

相關推薦