🌵如果项目技术栈中包含spring，同时又有Base64编码的需求，那么Base64Utils工具类将会是你的最好选择！⤵️
什么是Base64编码？⤵️
- 基本转换
- 针对URL的转换 （
+/替换为-_）
Base64Utils公开的API⤵️
Base64编码的使用场景⤵️
将图片数据流转换为Base64编码的字符串，处理后返回给前端，HTML中img标签可以直接将该数据放在src属性中，达到展示图片的效果。
/**
* <pre>
* 返回图片的Base64编码字符串
* 1.测试base64图片返回后被img标签接收的基本格式；
* 2.测试base64两种编码方式（基本+UrlSafe）编码的图片是否都能够被浏览器正常的解析；
* </pre>
*
* @return img标签可直接在src属性中填充的图片字符串
*/
@GetMapping("/demo02")
public String demo02(){
try(FileInputStream fileInputStream = new FileInputStream("aaa.png")){
byte[] buffer = new byte[fileInputStream.available()];
int ignored = fileInputStream.read(buffer);
return wrapBase642Image(Base64Utils.encodeToString(buffer));
} catch (IOException e) {
throw new RuntimeException(e);
}
}
private String wrapBase642Image(final String base64String) {
return "data:image/png;base64," + base64String;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>图片预览</title>
<script src="./axios.min.js"></script>
<script>
function base64ImageFill() {
let myImage = document.getElementById("myImage");
if (myImage.style.display === "none" && myImage.getAttribute("src") === "") {
let axios1 = axios.create({
baseURL: 'http://127.0.0.1:8080',
timeout: 30000,
headers: {
'Content-Type': 'application/json; charset=utf-8'
}
});
axios1.get('/download/demo02').then(res => {
myImage.src = res.data;
myImage.style.display = "block";
})
} else {
if (myImage.style.display === "none") {
myImage.style.display = "block";
} else {
myImage.style.display = "none";
}
}
}
</script>
</head>
<body>
<button onclick="base64ImageFill()">测试按钮</button>
<img id="myImage" src="" alt="My Image" style="display: none;"/>
</body>
</html>
➡️axios.min.js： https://cdn.bootcdn.net/ajax/libs/axios/1.2.3/axios.min.js
Base64可以使用URL编码格式处理图片吗？⤵️
不可以
// 不可以这样做哦，直接放到img的src属性中不会被正常解析。
wrapBase642Image(Base64Utils.encodeToUrlSafeString(buffer));
End.
