使用javascript和websockets从blob显示图像 [英] Display image from blob using javascript and websockets

问题描述

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

图像损坏或截断：data：image / png; base64，[某些数据]

这里是我用的Javascript代码显示我的BLOB：

  socket.onmessage =函数（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/1464608
Base64类是从这里： https://stackoverflow.com/a/246813/1464608

但是我得到的base64结果不匹配，而且Firefox检索到了图像被破坏的错误。

我知道这并不是很多信息，但我不知道我不知道该怎么看：/
任何帮助都是值得欢迎的！ 最简洁的解决方案是将base64编码器更改为直接在Uint8Array而不是字符串上运行。

重要提示：您需要将Web套接字的binaryType设置为arraybuffer为此。

onmessage方法应该如下所示：

  socket.onmessage =函数（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 ）：

  //将Uint8Array编码为base64的公共方法
函数编码（输入）{
 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？输入[i ++]：Number.NaN; //不确定索引
 chr3 = i< input.length？输入[i ++]：Number.NaN; //这里需要检查
 
 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）; 
} 
返回输出; 
} 
  

I'm currently working on a WebSocket application that is displaying images send by a C++ server. I've seen a couple of topics around there but I can't seem to get rid of this error in Firefox:

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

Here's the Javascript code I'm using to display my blob:

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);
}

I'm using the image of a red dot that I found on this topic: https://stackoverflow.com/a/4478878/1464608 And the Base64 class is from here: https://stackoverflow.com/a/246813/1464608

But the base64 outcome I get doesn't match and Firefox retrieves me an error of the image being corrupted.

I know this ain't much informations but I don't have a clue where to look :/ Any help is more than welcome!!

解决方案

I think the cleanest solution would be to change the base64 encoder to operate directly on a Uint8Array instead of a string.

Important: You'll need to set the binaryType of the web socket to "arraybuffer" for this.

The onmessage method should look like this:

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);
};

The converted encoder should then look like this (based on 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;
}

这篇关于使用javascript和websockets从blob显示图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！