javascript - 使用 javascript 和 websockets 显示来自 blob 的图像

Question

我目前正在开发一个显示 C++ 服务器发送的图像的 WebSocket 应用程序。我在那里看到了几个主题，但我似乎无法摆脱 Firefox 中的这个错误:

Image corrupt or truncated: data:image/png;base64,[some data]

这是我用来显示我的 blob 的 Javascript 代码:

socket.onmessage = function(msg) {
    var blob = msg.data;

    var reader = new FileReader();
    reader.onloadend = function() {
        var string = reader.result;
        var buffer = Base64.encode(string);
        var data = "data:image/png;base64,"+buffer;

        var image = document.getElementById('image');
        image.src = data;
    };
    reader.readAsBinaryString(blob);
}

我正在使用我在这个主题上找到的红点图像:https://stackoverflow.com/a/4478878/1464608Base64 类来自这里:https://stackoverflow.com/a/246813/1464608

但我得到的 base64 结果不匹配，Firefox 检索到图像已损坏的错误。

我知道这不是很多信息，但我不知道去哪里找:/任何帮助都非常受欢迎!!

Answer 1

我认为最干净的解决方案是将 base64 编码器更改为直接在 Uint8Array 而不是字符串上运行。

重要提示:为此，您需要将 Web 套接字的 binaryType 设置为“arraybuffer”。

onmessage 方法应该如下所示:

socket.onmessage = function(msg) {
    var arrayBuffer = msg.data;
    var bytes = new Uint8Array(arrayBuffer);

    var image = document.getElementById('image');
    image.src = 'data:image/png;base64,'+encode(bytes);
};

转换后的编码器应该如下所示(基于 https://stackoverflow.com/a/246813/1464608 ):

// public method for encoding an Uint8Array to base64
function encode (input) {
    var keyStr = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=";
    var output = "";
    var chr1, chr2, chr3, enc1, enc2, enc3, enc4;
    var i = 0;

    while (i < input.length) {
        chr1 = input[i++];
        chr2 = i < input.length ? input[i++] : Number.NaN; // Not sure if the index 
        chr3 = i < input.length ? input[i++] : Number.NaN; // checks are needed here

        enc1 = chr1 >> 2;
        enc2 = ((chr1 & 3) << 4) | (chr2 >> 4);
        enc3 = ((chr2 & 15) << 2) | (chr3 >> 6);
        enc4 = chr3 & 63;

        if (isNaN(chr2)) {
            enc3 = enc4 = 64;
        } else if (isNaN(chr3)) {
            enc4 = 64;
        }
        output += keyStr.charAt(enc1) + keyStr.charAt(enc2) +
                  keyStr.charAt(enc3) + keyStr.charAt(enc4);
    }
    return output;
}