后端返回图片数据(base64和二进制数据),前端展示图片

后端返回图片数据,前端展示图片

    • 1.后端返回图片数据(Base64字符串)给前端展示
      • 后端代码
      • 前端展示代码
    • 2.后端返回二进制流给前端展示
      • 后端代码
      • 前端代码接收数据流展示

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=

你可能感兴趣的:(后端,前端,html,js)