后端传输图片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>

效果展示

后端传输图片Base64数据到前端渲染相关推荐

base64图片展示（后端给base64数据，前端展示图片）
<img :src="imageData" alt="" class="sign-img-style"> <script& ...
vue中后端返回图片流，前端渲染方法
vue中后端返回图片流,前端渲染方法前端登录经常用到图形验证码,后端接口返回的是图片数据流,如下图返回图片流这样效果图如下: 首先封装接口api和uuid[就是一个随机数,防止重复] //获取图形 ...
智能蜂箱管理系统——物联网工程专业软硬结合课设计算机专业课程设计大作业项目（安卓，Springboot后端，网页数据展示前端，ESP8266传输数据，MQTT服务器）
项目一智能蜂箱管理系统 (有需要请私聊) 包括安卓端.数据展示的前端(含登录注册),Springboot后端,ESP8266硬件端传输数据的代码,以及文档. 功能简介安卓端安卓端具有创建蜂箱.删 ...
后端传来map数据，前端的获取方式
比如car-num1可以使用res.data['car-num1']去获取值另外一些常见数据的获取方式 1.普通对象我们可以直接res.data.carNumber去获取carNumber这个对象 ...
前端渲染与后端渲染的区别
前端渲染: 指的是后端返回JSON数据,前端利用预先写的html模板,循环读取JSON数据,拼接字符串(es6的模板字符串特性大大减少了拼接字符串的的成本),并插入页面. 好处:网络传输数据量小.不占 ...
前端渲染与后端渲染之间的区别？
前端没兴起之前,网页的展示大都是后端渲染,也就是服务器渲染. 随着前端行业的发展,前端的工作越来越精细.前后端开始分离,前端只关注ui渲染.后端只提供数据和进行逻辑处理. 简单的解释,前端写好html ...
什么是前端渲染，什么是后端渲染？
什么是前端渲染,什么是后端渲染? 后端路由阶段后端路由的缺点前后端分离阶段单页面富应用阶段后端路由阶段早期的网站开发整个HTML页面是由服务器来渲染的. 服务器直接生产渲染好对应的HTML页 ...
前端与后端之间的数据传递
前端与后端之间的数据传递前端页面页面结构 index.html 代码后台服务新建[Dynamic Web Project] 项目结构 Servlet文件解决跨域问题效果展示 JSONObj ...
开发SpringBoot+Jwt+Vue的前后端分离后台管理系统VueAdmin - 前端笔记
1. 前言而接下来,我们即将开发一个前后端分离的后台管理系统VueAdmin.权限框架采用spring security,然后相对来说权限模块开发就多点代码,也仅此而已了.对了前端的系统界面也是我们 ...

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

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

后端代码

前端代码

效果展示

后端传输图片Base64数据到前端渲染相关推荐

最新文章

热门文章