后端传输图片Base64数据到前端渲染

最新推荐文章于 2024-05-31 15:00:13 发布

刘二小(◞‸◟ )

最新推荐文章于 2024-05-31 15:00:13 发布

阅读量2.4k

点赞数 2

文章标签：前端 javascript java

本文链接：https://blog.csdn.net/weixin_46486499/article/details/125486007

版权

后端传输图片Base64数据到前端渲染

后端代码

public String sendImg(LoginUser loginUser) {
        //在数据库中查找对应用户
        LoginUser loginUser1 = loginUserMapper.selectOne(new LambdaQueryWrapper<LoginUser>().eq(LoginUser::getAccount, loginUser.getAccount()));
        //获取对应用户的头像
        String profile = loginUser1.getProfile();
        String imgPath = "";
        if (property.startsWith(OsName.WINDOWS.toString().toLowerCase())) {
            imgPath = "D:\\bg\\" + profile;
        } else if (property.startsWith(OsName.LINUX.toString().toLowerCase())) {
            imgPath = "\\usr\\imgPath" + profile;
        }
        FileInputStream inputStream = null;
        String base64Str = "";
        try {
            //new 一个base64编码器
            Base64.Encoder encoder = Base64.getEncoder();
            //通过图片路径获取输入流
            inputStream = new FileInputStream(imgPath);
            //通过输入流长度创建对应长度的byte数组
            int available = inputStream.available();
            byte[] bytes = new byte[available];
            //从(来源)输入流中(读取内容)读取的一定数量字节数,并将它们存储到(去处)缓冲区数组b中
            inputStream.read(bytes);
            //对byte数组进行转码
            base64Str = encoder.encodeToString(bytes);
        } catch (Exception e) {
            e.printStackTrace();
        }
        return base64Str;
    }

前端代码

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<script>
    function sendImg() {
        $.ajax({
            type: "POST", //提交方式
            url: "http://127.0.0.1:8080/users/sendImg",
            // async: false,  // 重点，false是同步，true是异步
            // dataType:'json',  // 需要写上
            data: {
                account:"admin",
                password:"admin"
            },
            success: function (result) {
                console.log(result)  // 打印出返回的值
                function c(){
                    var cc=new Image();
                    cc.src="data:image/jpg;base64,"+ result;
                    document.getElementById("d1").appendChild(cc);
                }
                c();
            }
        })

    }
</script>
<style>
    img{
        width: 300px;
        height: 300px;
    }
</style>
<body>
<div id="d1"></div>
<input type="button" value="发送" onclick="sendImg()">
</body>