后端直接返回二进制图片、前端src显示

已于 2023-04-11 10:52:59 修改
阅读量457 收藏 4
点赞数 1
文章标签： 前端 vue.js javascript
于 2023-03-03 11:00:01 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43899561/article/details/129316007
版权

后端生成一张随机字符串验证码，以二进制图片返回给前端会发现拿到的是一堆乱码
在这里插入图片描述
只需要给axios设置responseType: “arraybuffer”，然后再解析即可
在这里插入图片描述
效果：
在这里插入图片描述

Frion_A
关注
  • 1
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
图片的二进制流存储和显示
11-01
此程序是一个用于将图片以二进制流的形式保存到数据库，然后读取显示到picturebox上的小程序。
后端返回二进制流，前端处理二进制文件流，实现预览图片以及PDF
hello word
02-22 4358
转成的本地预览地址赋值给Img的src即可展示图片。方法打开转成本地预览地址即可预览PDF,如下图。转成本地预览地址， 在通过。定义接口：并设置相应类型。1、首先预览PDF需要。，不能预览，会直接下载。
前端处理接口直接返回的图片
最新发布
dbeidouxingf的博客
03-06 550
有时候接口会直接返回图片而不是连接，前端需要处理后才能使用。
后端返回二进制图片前端乱码解决方案
weixin_46801282的博客
03-09 9077
今天有小伙伴发现一个问题,后端返回一张图片,但是前端打印结果是�PNG\r\n\u001a\n\u0000\u0000\u0000\rIHDR\u这种unicode乱码,postman和浏览器调试返回都能看到图片 打印结果如图所示: 简单测试了一下,发现出现这种情况是因为后端图片没有转码成base64直接用文件流返回,就像这样 router.get('/test', (req, res) => { fs.readFile('./test.png', 'binary', function (err
后端返回图片二进制流，前端转base64
见贤思齐焉，见不贤内自省
08-16 2076
后端给了一个图片url：http://localhost:3003/images/0df7f084788cc336e5fb2b2b4e708ed8bgc.jpg 但是我们想通过axios来进行请求： axios .get( "http://localhost:3003/images/0df7f084788cc336e5fb2b2b4e708ed8bgc.jpg", ) .then(res
后端返回图片二进制流，前端处理
热门推荐
会飞的咕咕鱼的博客
01-08 1万+
//vue中 this.$http.get("url....", { responseType: "arraybuffer", }).then(function (response) { //将从后台获取的图片流进行转换 return 'data:image/png;base64,' + btoa( new Uint8Array(response.data).reduce((data, byte) =&...
python 读取二进制 显示图片案例
09-17
主要介绍了python 读取二进制 显示图片案例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
js 显示base64编码的二进制流网页图片
10-26
base64简单地说，它把一些 8-bit 数据翻译成标准 ASCII 字符，我们把图像文件的内容直接写在了HTML 文件中，这样做的好处是，节省了一个HTTP 请求
vue+axios展示二进制文件流图片
01-20
1、const url = URL.createObjectURL(new Blob([res])) // 这种方法需要图片服务器不要添加限制 2、const url = `[removed]${btoa(new Uint8Array(res).reduce((data, byte) => data + String.fromC
PHP实现接收二进制流转换成图片的方法
01-21
本文实例讲述了PHP实现接收二进制流转换成图片的方法。分享给大家供大家参考，具体如下： 这里实现php 接收二进制流转换成图片,所使用的图片类imageUpload.php如下: <?php /** * 图片类 * @version 1.0 * * PHP...
基于javascript处理二进制图片流过程详解
10-15
主要介绍了基于javascript处理二进制图片流过程详解,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
vue下载二进制流图片操作
01-21
1、应项目要求，后台返回二进制流，而且乱码 2、红色为必须 this.$axios.post('/fishweb/agent/downLoad',this.stringify({filename:'qrCode.jpg'}), { responseType: 'arraybuffer' //指定返回数据的格式为blob }).then((res) => { var src=[removed]+ btoa(new Uint8Array(res).reduce((data, byte) => data + String.fromCharCode(byte)
后端返回二进制字符串转为图片
qq_64775236的博客
01-09 442
后端返回二进制字符串转为图片
后端返回图片信息是二进制流文件，前端vue如何解析
u011295864的博客
01-18 3366
背景： 使用axios请求接口，返回的打印返回的数据，浏览器控制台显示乱码，而在preview里查看却是一张图片。 这时候应该怎么处理？ 放弃axios，使用XMLHttpRequest() 代码如下： html部分： <img :src="qrCodeSrc" /> js部分： let qrCodeUrl = '' // 要请求的接口地址 let xhr = new XMLHttpRequest() xhr.open('GET'.
前端解决后端返回的图片二进制文件
dachuichaobang的博客
05-19 598
写后台管理登录的时候有个验证码 我发送 获取验证码的请求 返回值是一堆乱码 懵逼… 各种搜 找到解决方案 首先 你确定返回的是二进制文件流 而不是base64 这是我请求的方法 下面是获取到的数据 解决方法 加上请求头 打印结果 最后在方法中进行转换 效果实现 ...
关于后台返回的二进制图片流的转换
m0_59638475的博客
02-14 819
图片流转为base64格式的图片
html中的img的src可以写二进制流
HHYZBC的博客
08-05 4295
网页渲染图片的常用做法是在img标签中src属性为一个图片的url地址，由浏览器去下载、缓存、渲染。但这样的话就需要事先将图片进行保存起来，而有些临时性的图片是不需要保存的，就可以在前端中以二进制的方式去渲染该图片即可。如上面例子中的src属性则就是在前端对二进制进行渲染的。data表示取得数据的协定名称，image/png 是数据类型名称，base64 是数据的编码方法，逗号后面就是这个image/png文件base64编码后的数据。目前支持的数据类型有：data:,文本数据。...
前端验证码后端返回一个图片_遇到验证码怎么办？Python编写一个验证码图片数据标注GUI程序！...
weixin_30952319的博客
01-24 348
做验证码图片的识别，不论是使用传统的ORC技术，还是使用统计机器学习或者是使用深度学习神经网络，都少不了从网络上采集大量相关的验证码图片做数据集样本来进行训练。采集验证码图片，可以直接使用Python进行批量下载，下载完之后，就需要对下载下来的验证码图片进行标注。一般情况下，一个验证码图片的文件名就是图片中验证码的实际字符串。在不借助工具的情况下，我们对验证码图片进行上述标注的流程是：1、打开图片...
js解析后端返回的二进制图片
08-23
### 回答1： JavaScript 可以使用 `FileReader` 对象来解析后端返回的二进制图片。首先，使用 `XMLHttpRequest` 或 `fetch` 来获取图片的二进制数据。然后，使用 `FileReader` 的 `readAsArrayBuffer` 方法将二进制数据读取到 ArrayBuffer 中。最后，使用 `URL.createObjectURL` 将 ArrayBuffer 转换为可用于图片元素的 URL。 示例代码： ``` const xhr = new XMLHttpRequest(); xhr.open("GET", "path/to/image.jpg", true); xhr.responseType = "arraybuffer"; xhr.onload = function(e) { if (this.status === 200) { const blob = new Blob([this.response], {type: "image/jpeg"}); const url = URL.createObjectURL(blob); const img = document.createElement("img"); img.src = url; document.body.appendChild(img); } }; xhr.send(); ``` 注意：在使用完 URL.createObjectURL 方法创建出来的 URL 之后，需要使用 URL.revokeObjectURL 方法来释放这个 URL，避免内存泄漏。 ### 回答2： 在前端中，可以使用JavaScript解析后端返回的二进制图片。首先，需使用XMLHttpRequest对象发送异步请求来获取后端返回的二进制数据。通过设置XMLHttpRequest的responseType为'arraybuffer'，确保获取到的数据以数组缓冲区的形式返回。 接下来，可以通过创建一个Blob对象，将后端返回的二进制数据存储在其中。Blob可以看作是一个不可修改的二进制数据对象。可以使用Blob对象的构造函数，将从服务器接收到的二进制数据传递给它。 在创建完Blob对象后，可以使用URL.createObjectURL()方法生成一个URL，该URL可以用于指向Blob对象内容的临时链接。这个临时链接可以作为图片的src属性值，直接将图片显示在网页中。 最后，可以创建一个Image对象，将临时链接作为其src属性值。当浏览器加载这个链接时，就会自动将Blob对象转换为图像，并显示在页面上。 综上所述，通过上述步骤，我们可以使用JavaScript解析后端返回的二进制图片，将其显示在前端页面上。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值