將圖片通過byte[]位元組陣列Base64加密後給前端顯示
阿新 • • 發佈:2019-01-10
1.base64編碼顯示圖片
一般我們後臺給前端傳圖片,有兩種方式,一種就是通過response.getOutputStream直接將圖片以流的形式寫到頁面顯示,另一種就是先把圖片上傳到伺服器,拿到url地址後把url地址給前端
第一種方式簡單,不需要伺服器,但是這種不太符合現在開發的要求,因為我們通常需要在響應的時候,加上額外的欄位表示響應成功狀態,以及錯誤資訊,而直接將圖片作為流寫回前端的話,response是不能攜帶這些引數的. 第二種方法需要有一個伺服器,且上傳圖片又是一個額外的步驟.
這個時候我們就可以將圖片的位元組陣列通過base64編譯後返回前端,前端直接拿了可以顯示為圖片
獲取圖片的位元組陣列看上一篇部落格:
2. 位元組陣列base64編譯
byte[] bytes;//圖片的位元組陣列
BASE64Encoder encoder = new BASE64Encoder();
String data = encoder.encode(bytes);
//data = iVBORw0KGgoAAAANSUhEUgAAAFAAAAAaCAIAAACvsEzwAAABxElEQVR42tWYS2rDMB......
3. 前端顯示
前端拿到這個data字串後,有兩種方式顯示圖片
先拼接一下字首, 分別是data:圖片型別 ; 編碼型別, data字串資料
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFAAAAAaCAIAAACvsEzwAAABxElEQVR42tWYS2rDMB......
第一種,css方式:
div.image {
width: 99px;
height: 42px;
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA......);
}
第二種,img標籤方式
<img width="900" height="450" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGMAAAAqCAYAAA...." />
注意,如果圖片很大的話,轉成的data字串也很長,我這裡一個小圖片直接15w的字元了,所以這種方式適合比如logo,驗證碼這種小圖片,又不希望存在伺服器的應用場景
自己拼接了<img>
標籤後,可以在markdown2直接貼上看看效果