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

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

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

  • 1
    点赞
  • 17
    收藏
  • 打赏
    打赏
  • 2
    评论

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

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题:大白 设计师:CSDN官方博客 返回首页
评论 2

打赏作者

m0_38063172

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值