springboot 后端返回json里包含图片并展示在前端页面

最新推荐文章于 2024-07-23 14:32:03 发布

原创最新推荐文章于 2024-07-23 14:32:03 发布 · 5.1k 阅读

CC 4.0 BY-SA版权

本文介绍了一种前后端交互的方式，通过将图片转换为Base64编码的字符串，实现在JSON数据中传输图片的功能。具体包括后端使用Java读取图片并进行Base64编码，以及前端使用jQuery发起AJAX请求获取并解析Base64编码的图片数据。

json格式

{"data":{"name":"张三","age":"18"},"image":"base64位加密字节数组}

后端代码

@RestController
public class TestController {

    @PostMapping("/imageJson")
    public Map getImageJson() throws IOException {
        FileInputStream fileInputStream = new FileInputStream("E:/test/1.jpg");
        ByteArrayOutputStream bos = new ByteArrayOutputStream();
        byte[] b = new byte[1024];
        int len = -1;
        while((len = fileInputStream.read(b)) != -1) {
            bos.write(b, 0, len);
        }
        byte[] fileByte = bos.toByteArray();
        //以上为读取图片变成字节数组
        HashMap<String, Object> map = new HashMap<>(2);
        map.put("data",new person("张三","18"));
        //进行base64位加密
        BASE64Encoder encoder = new BASE64Encoder();
        String data = encoder.encode(fileByte);
        map.put("image",data);
        return map;
    }
}

前端代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>测试验证码2</title>
</head>
<body>
<div>
    <img id="kaptchaImage" onclick="change();"/>
</div>
<div>
    <button id="changeImage" style="width: 12.5rem;height: 12.5rem;">刷新图片</button>
</div>
<div>
    <textarea id="showByte" cols="60" rows="15" style="font-size: 1.125rem;" placeholder="显示收到的字节数组"></textarea>
</div>
<div id="imgcontainer"></div>

<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script>
    $("#changeImage").click(function () {
        $.ajax({
            type: "POST",
            async: false,
            url: "http://127.0.0.1:8080/imageJson",
            dataType: "json",
            success: function (result) {
                console.log(result);
                var data = result.data;
                var image = result.image;
                $("#kaptchaImage").attr("src", "data:image/png;base64," + image);
                $("#showByte").text(image);

            }
        })
    })
</script>
</body>
</html>

写的简陋没有进行错误处理