如何將blob數據轉換爲JavaScript中的圖像？

Question

我試圖通過WebSocket傳輸圖像，然後將其顯示在網頁上。圖像以blob的形式發送。

websocket.onmessage = function (event) { 
    document.getElementById("foto").src = "data:image/png;event.data)"; 
}; 

我得到這個錯誤：

Failed to load resource: net::ERR_INVALID_URL

Answer 1

應該

document.getElementById("foto").src = "data:image/png;" + event.data; 

假設event.data是實際的數據作爲一個字符串。

Answer 2

試試這個：

let urlObject; 

socket.onmessage = function(msg) { 
    const arrayBuffer = msg.data; 
    const image = document.getElementById('image'); 

    if (urlObject) { 
     URL.revokeObjectURL(urlObject) // only required if you do that multiple times 
    } 
    urlObject = URL.createObjectURL(new Blob([arrayBuffer])); 

    image.src = urlObject; 

};