BLOBデータをJavaScriptでイメージに変換するには？

Question

私はWebSocketを通して画像を転送し、それをWebページに表示しようとしています。イメージはブロブとして送信されます。私はこのエラーを取得してい

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

：

Failed to load resource: net::ERR_INVALID_URL

Answer 1

それはevent.dataが文字列として実際のデータであると仮定すると、

document.getElementById("foto").src = "data:image/png;" + 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; 

};