如何在JavaScript中将blob数据转换为图像？

Question

我正在尝试通过WebSocket传输图像，然后将其显示在网页上。图像以blob形式发送。

Question.find_by(id: idName)

我收到了这个错误：

  

无法加载资源：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;

};