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

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

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

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格式的图片。

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。