本文介绍了后端如何将图片数据以Base64字符串和二进制流的形式返回给前端，并展示了前端如何解析和展示这两种数据，包括Base64编码的多种类型数据（如HTML、CSS、JavaScript、图片）以及二进制流的处理方法。
后端返回图片数据,前端展示图片
1.后端返回图片数据(Base64字符串)给前端展示
后端代码
返回给前端String数据即可,前端解析String数据并展示
@Post("sendPicBase64")
public String getImage() {
String imageString = "";
String path = "D:\\test.png";
try {
FileInputStream fis = new FileInputStream(new File(path));
int count = 0;
while (count == 0) {
count = fis.available();
}
byte[] read = new byte[count];
System.err.println(read);
fis.read(read);
imageString = Base64.getEncoder().encodeToString(read);
System.err.println("返回前端的base64图片字符串:"+imageString);
} catch (Exception e) {
e.printStackTrace();
}
return imageString;
}
前端展示代码
需要注意的是:img的src格式为: 'data:image/png;base64,' + base64的图片数据;image/png要根据图片格式变化. data支持的格式如下:
data:,文本数据
data:text/plain,文本数据
data:text/html,HTML代码
data:text/html;base64,base64编码的HTML代码
data:text/css,CSS代码
data:text/css;base64,base64编码的CSS代码
data:text/javascript,Javascript代码
data:text/javascript;base64,base64编码的Javascript代码
data:image/gif;base64,base64编码的gif图片数据
data:image/png;base64,base64编码的png图片数据
data:image/jpeg;base64,base64编码的jpeg图片数据
data:image/x-icon;base64,base64编码的icon图片数据
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta content="width=device-width,user-scalable=no" name="viewport">
<title>测试<
最低0.47元/天 解锁文章
扫一扫
1374
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
