快捷導(dǎo)航

JavaScript如何接收并顯示字節(jié)流中的圖片

更新時(shí)間：2023年12月27日 10:39:53 作者：m0_38063172

這篇文章主要介紹了JavaScript如何接收并顯示字節(jié)流中的圖片問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教

JS接收并顯示字節(jié)流中的圖片

寫了個(gè)網(wǎng)頁版貪吃蛇，需要在前端接受后端傳過來的字節(jié)流然后顯示，谷歌上搜了一下，最后的代碼如下，并且簡(jiǎn)單做下講解。

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");
            }

剛又去谷歌上面搜了一下，為了寫這篇文章，又學(xué)了點(diǎn)新東西，畢竟自己沒有完全搞明白的話沒法給別人講。

msg.data指的是接收到的數(shù)據(jù)

JavaScript的websocket是事件驅(qū)動(dòng)的api，如果寫成event.data就直觀多了，

socket.onmessage = function(msg)

這里的函數(shù)接受的參數(shù)其實(shí)是另一個(gè)peer給它發(fā)送了數(shù)據(jù)這一事件，并不直接是另外一個(gè)peer發(fā)送的數(shù)據(jù)。

Uint8Array表示8位無符號(hào)整數(shù)的數(shù)組

剛剛試了一下，直接寫

var blob = new Blob([msg.data], { type: “image/png” });

也是可以的，字節(jié)流就是八位，和八位無符號(hào)整數(shù)是一樣的。

一定要多思考，多嘗試。

Blob對(duì)象可以表示

文件類型（file-like）的不可變的原始數(shù)據(jù)，因?yàn)檫@種文件格式（數(shù)據(jù)排列格式）在JavaScript中不是原生支持的，所以需要用Blob表示。

在這里，blob變量就是png格式的圖片，它的內(nèi)部數(shù)據(jù)是bytes。

URL.createObjectURL方法會(huì)返回含有表示參數(shù)中的對(duì)象的url的DOMString，DOMString是UTF-16的字符串，因?yàn)镴avaScript中已經(jīng)支持UTF-16的String，所以它直接會(huì)被轉(zhuǎn)換成String。

（As JavaScript already uses such strings, DOMString is mapped directly to a String.）