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

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

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ū)動的api，如果寫成event.data就直觀多了，

socket.onmessage = function(msg)

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

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

剛剛試了一下，直接寫

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

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

一定要多思考，多嘗試。

Blob對象可以表示

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

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

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

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

Blob的url指的是

對象數(shù)據(jù)在內(nèi)存中的位置，這里可以通過url變量找到blob變量表示的那張png格式的圖片。

總結(jié)

以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。

最新評論