Spring Boot中輸出Base64編碼的圖片通常涉及以下步驟:
下面是一個簡單的例子,展示了如何在Spring Boot中實現(xiàn)這一過程:
import org.springframework.core.io.ClassPathResource;
import org.springframework.http.MediaType;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import java.nio.file.Files;
import java.nio.file.Paths;
import java.util.Base64;
@Controller
public class ImageController {
@GetMapping(value="/image", produces=MediaType.TEXT_PLAIN_VALUE)
@ResponseBody
public String getImageAsBase64() throws Exception {
// 讀取圖片文件
byte[] imageBytes=Files.readAllBytes(Paths.get(new ClassPathResource("image.png").getURI()));
// 對字節(jié)數(shù)組進行Base64編碼
String encodedImage=Base64.getEncoder().encodeToString(imageBytes);
// 返回Base64編碼的字符串
return "data:image/png;base64," + encodedImage;
}
}
在這個例子中,我們假設圖片文件image.png位于類路徑下。控制器方法getImageAsBase64讀取該文件,將其轉換為Base64編碼的字符串,并通過HTTP響應返回給客戶端。
輸出Base64編碼圖片的好處:
然而,需要注意的是,將圖片編碼為Base64會增加數(shù)據(jù)的大小(大約增加33%),并可能增加服務器的CPU負載,因為編碼和解碼過程需要額外的計算資源。因此,在決定是否使用Base64編碼圖片時,需要權衡這些利弊。
eb圖像的輸出設置
在Photoshop中,優(yōu)化Web圖像后,在“存儲為Web所有格式”對話框中,點擊“優(yōu)化”擴展按鈕,在展開的下拉菜單中選擇“編輯輸出設置”命令。如圖所示:
打開“編輯輸出設置”對話框,在對話框中可以控制如何設置HTML文件的格式、如何命名文件和切片,以及在存儲優(yōu)化圖像時如何處理背景圖像。如圖所示:
增加內容:Web圖像可以是位圖,也可以使矢量圖。位圖的格式如GIF、JPEG、PNG等都與分辨率有關,這就意味著位圖圖像的尺寸隨著顯示器分辨率的不同而發(fā)生著變化,圖像的品質也可能會發(fā)生變化。矢量圖格式SVG、SWF與分辨率沒有關系,大家可以對圖像進行放大或者是縮小,并且不會降低圖像的品質。矢量格式也可以包含柵格數(shù)據(jù),可以使用“存儲問Web所用格式”命令將圖像導出為SVG和SWF格式。
建議大家集合之前小編分享的內容一起來學習Photoshop,在操作過程中遇到問題可在留言區(qū)進行留言,小編會盡快進行回復。
單擊上方的關注按鈕關注小編,一起來學習PS吧!
篇文章我們講解了webpack中的loader,并且使用less、less-loader、css-loader、style-loader,將一個在js中import的less文件通過webpack將樣式打包到了頁面中,但是我們發(fā)現(xiàn),頁面中樣式確實是有了,但是頁面的樣式是通過style標簽的形式寫入到了頁面中,在實際開發(fā)中我們其實更傾向于使用link標簽導入樣式,這時候應該怎么做呢?
一、使用mini-css-extract-plugin插件
這個插件能將CSS提取為獨立的文件,對每個包含css的js文件都會創(chuàng)建一個CSS文件,支持按需加載css和sourceMap。
首先安裝插件
cnpm install mini-css-extract-plugin --save-dev
安裝完插件后其實就是設置了,下面是簡單的設置信息:
const { CleanWebpackPlugin }=require('clean-webpack-plugin'); const HtmlWebpackPlugin=require('html-webpack-plugin'); const MiniCssExtractPlugin=require('mini-css-extract-plugin'); module.exports={ mode:"development", entry:{ "common":"./src/js/common.js", "index":"./src/js/index.js", "login":"./src/js/login.js" }, output:{ filename:"js/[name].js", }, plugins:[ new CleanWebpackPlugin(), new HtmlWebpackPlugin({ template:'./src/index.html', filename:'index.html', chunks:["common","index"], hash:true }), new HtmlWebpackPlugin({ template:'./src/login.html', filename:'login.html', chunks:["common","login"], hash:true }), new MiniCssExtractPlugin({ filename:'css/[name].css', chunkFilename:'[id].css' }) ], module:{ rules:[ // { // test:/\.less$/, // use:[ // {loader:"style-loader"}, // {loader:"css-loader"}, // {loader:"less-loader"} // ] // } { test:/\.less$/, use:[ { loader:MiniCssExtractPlugin.loader }, "css-loader", "less-loader" ] }, ] } }
在webpack.config.js中我們首先定義插件,然后在plugins項中實例化插件(前面講到了插件需要安裝、定義、實例化三步),最后在module中定義處理less的規(guī)則,注釋掉的部分是講解loader的時候使用的,沒刪掉是要做個比較。
plugins項中mini-css-extract-plugin的實例化參數(shù)filename其實和output,html-webpack-plugin中定義的filename,完全一樣,就是給輸出文件起名字(有人可能會說不是在output中定義了嗎,其實webpack入口與輸出只是js,其他的是靠插件或者loader來處理,所用不要弄混)。
chunkFilename和html-webpack-plugin中的chunk類似,但是后面的[id].css不好理解(實在明白就這樣寫就行,固化的不會變),其實這個地方?jīng)]法寫實際具體的名字的,因為這是下面的loader中mini-css-extract-plugin插件內部自己產(chǎn)生的。
再來看rules中的定義,我們去掉了style-loader,因為我們不是要把樣式寫的頁面中,我們是希望link單獨的css文件。規(guī)則的意思就是遇到js中導入的以.less為結尾的文件使用less-loader來處理,然后轉換成css,然后讓css-loader處理樣式內部的一些關于url,或者@import等一些css的問題,然后交給下一個loader,這個時候的loader變成了mini-css-extract-plugin中的loader了,這個laoder就是將css單獨提取出來放入頁面中,如下圖:
二、處理圖片資源
頁面中有三種圖片的引用方式,一種是html頁面中的 img標簽,一種是樣式中類似background:url(),一種是是腳本中創(chuàng)建圖片并插入頁面的。那么我們就將這三種方式都嘗試一下。項目目錄如下圖:
增加了三個圖片,其實就是一個圖片就是名字不一樣而已。然后分別修改less文件,js文件,html文件,各個文件內容如下:
index.less
index.js
index.html
圖片資源的處理有很多l(xiāng)oader可以用,這里我們使用url-loader,對于頁面中的img標簽,我們使用html-withimg-loader。
安裝loader:
cnpm install url-loader html-withimg-loader --save-dev
然后配置webpack.config.js:
const { CleanWebpackPlugin }=require('clean-webpack-plugin'); const HtmlWebpackPlugin=require('html-webpack-plugin'); const MiniCssExtractPlugin=require('mini-css-extract-plugin'); module.exports={ mode:"development", entry:{ "common":"./src/js/common.js", "index":"./src/js/index.js", "login":"./src/js/login.js" }, output:{ filename:"js/[name].js", }, plugins:[ new CleanWebpackPlugin(), new HtmlWebpackPlugin({ template:'./src/index.html', filename:'index.html', chunks:["common","index"], hash:true }), new HtmlWebpackPlugin({ template:'./src/login.html', filename:'login.html', chunks:["common","login"], hash:true }), new MiniCssExtractPlugin({ filename:'css/[name].css', chunkFilename:'[id].css' }) ], module:{ rules:[ { test:/\.less$/, use:[ { loader:MiniCssExtractPlugin.loader, options:{ publicPath:"../" } }, "css-loader", "less-loader" ] }, { test:/\.(png|svg|jpg|gif)$/, use:[ { loader:'url-loader', options:{ limit:10240, name:"imgs/[name].[ext]", } } ] }, { test:/\.(htm|html)$/, use:["html-withimg-loader"] } ] } }
這里需要注意幾點:
第一、minicssextractplugin中添加了一個配置publicPath,為什么不把它放到output中?因為output中的pubicPath會影響所有路徑。這里面我們只是想讓css-loader處理完css后只解決樣式表里的路徑問題。
第二、url-loader,limit參數(shù),當圖片文件小于10K的時候,將文件轉換成dataUrl格式的圖片減少鏈接請求,name參數(shù)就是生成的文件名稱,當然前面的imgs是dist目錄下的imgs文件夾。
第三、遇到html或者htm結尾的文件時使用html-withimg-loader處理里面的圖片資源。
前端的模塊化開發(fā)不建議在頁面中直接使用圖片鏈接,要在js中導入圖片,但我感覺不太現(xiàn)實,畢竟img標簽不是擺設。
接下來運行 npx webpack命令,效果如下:
我們的圖片是50多K大小所以dist目錄下生成了imgs文件夾,并且將src中的圖片考了過來。
如果我們將limit的值改為102400后,圖片將直接轉換成dataurl格式,不在保存到dist目錄下,入下圖:
我們可以發(fā)現(xiàn)他們的鏈接地址是有區(qū)別的。
三、總結
我們分了五節(jié)內容簡單的描述了webpack4最基本的一些知識點,主要包括:
1、安裝
前提條件安裝node
在項目中使用npm init -y,初始化項目,主要是創(chuàng)建了一個package.json的文件,用來記錄項目信息以及依賴關系。
為了避免插件或者loader下載不了,介紹了cnpm。
2、入口與輸出
webpack.config.jswebpack的配置文件
npx webpack運行webpack的命令
最基本的入口與輸出的概念
3、插件
clear-webpack-plugin 清除dist目錄的插件
html-webpack-plugin 簡化html創(chuàng)建的一個插件,并且關聯(lián)js
mini-css-extract-plugin 單獨提起css為文件的插件
4、加載器(loader)
model模式(開發(fā)模式,產(chǎn)品模式)
less-loader、css-loader、style-loader、url-loader、html-withimg-loader
這些知識點只是讓初學者快速的跑起來一個webpack,避免踩坑,在實際的項目中遇到問題時可以知道具體知道從哪方面入手來解決問題。
如果內容中有錯誤,歡迎大家指正。謝謝!
*請認真填寫需求信息,我們會在24小時內與您取得聯(lián)系。