用JavaScript接收并显示字节流中的图片

最新推荐文章于 2025-05-30 10:50:29 发布

m0_38063172

最新推荐文章于 2025-05-30 10:50:29 发布

阅读量1.7w

点赞数 1

CC 4.0 BY-SA版权

分类专栏：前端 JavaScript 文章标签： Blob png 前端显示图片

本文链接：https://blog.youkuaiyun.com/m0_38063172/article/details/83989639

前端同时被 2 个专栏收录

7 篇文章

订阅专栏

JavaScript

4 篇文章

订阅专栏

这篇博客讲述了如何在前端使用JavaScript接收后端传来的字节流，并将其转化为PNG图片进行显示。通过WebSocket API接收事件，将数据转换为Blob对象，再利用URL.createObjectURL方法创建一个指向该图片内存位置的URL，从而在网页上展示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

写了个网页版贪吃蛇，需要在前端接受后端传过来的字节流然后显示，谷歌上搜了一下，最后的代码如下，并且简单做下讲解。

socket.onmessage = function(msg) {
                var bytes = new Uint8Array(msg.data);
                var blob = new Blob([bytes], { type: "image/png" });
                var url = URL.createObjectURL(blob);
                document.getElementById('image').src = url;
                console.log("received some data");
            }

刚又去谷歌上面搜了一下，为了写这篇文章，又学了点新东西，毕竟自己没有完全搞明白的话没法给别人讲。

msg.data指的是接收到的数据，JavaScript的websocket是事件驱动的api，如果写成event.data就直观多了，socket.onmessage = function(msg)，这里的函数接受的参数其实是另一个peer给它发送了数据这一事件，并不直接是另外一个peer发送的数据。

Uint8Array表示8位无符号整数的数组。刚刚试了一下，直接写var blob = new Blob([msg.data], { type: “image/png” });也是可以的，字节流就是八位，和八位无符号整数是一样的。一定要多思考，多尝试。

Blob对象可以表示文件类型（file-like）的不可变的原始数据，因为这种文件格式（数据排列格式）在JavaScript中不是原生支持的，所以需要用Blob表示。在这里，blob变量就是png格式的图片，它的内部数据是bytes。

URL.createObjectURL方法会返回含有表示参数中的对象的url的DOMString，DOMString是UTF-16的字符串，因为JavaScript中已经支持UTF-16的String，所以它直接会被转换成String。（As JavaScript already uses such strings, DOMString is mapped directly to a String.）

Blob的url指的是对象数据在内存中的位置，这里可以通过url变量找到blob变量表示的那张png格式的图片。