現在、C++サーバーから送信された画像を表示するWebSocketアプリケーションで作業しています。いくつかのトピックを見てきましたが、Firefoxでこのエラーを取り除くことはできないようです。
画像の破損または切り捨て:data:image/png; base64、[一部のデータ]
以下は、ブロブを表示するために使用している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/1464608 そして、Base64クラスはここからです: https ://stackoverflow.com/a/246813/1464608
しかし、私が受け取るbase64の結果は一致せず、Firefoxは画像が破損しているというエラーを取得します。
私はこれが多くの情報ではないことを知っていますが、どこを見るべきかについての手がかりがありません:/どんな助けも歓迎です!
最もきれいな解決策は、文字列ではなくUint8Arrayで直接動作するようにbase64エンコーダーを変更することだと思います。
重要:これには、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;
}
おかげで、それはうまく機能しています!!
だから私は最終的なJavaScriptコードを共有すると思います:
var socket = new WebSocket('ws://'+Host+':'+port, protocol);
socket.binaryType = 'arraybuffer';
try {
socket.onopen = function() {
document.getElementById('status').style.backgroundColor = '#40ff40';
document.getElementById('status').textContent = 'Connection opened';
}
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);
}
socket.onclose = function(){
document.getElementById('status').style.backgroundColor = '#ff4040';
document.getElementById('status').textContent = 'Connection closed';
}
} catch(exception) {
alert('Error:'+exception);
}
なぜBLOBバージョンがそんなにトリッキーなのか本当に理解していないが、これはトリックをやった!
もっと簡単に書くことができます:
socket.onmessage = function(msg) {
var arrayBuffer = msg.data;
var bytes = new Uint8Array(arrayBuffer);
var blob = new Blob([bytes.buffer]);
var image = document.getElementById('image');
var reader = new FileReader();
reader.onload = function(e) {
image.src = e.target.result;
};
reader.readAsDataURL(blob);
};
別の選択肢
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;
};
他の回答のおかげで、私はwebsocketでjpeg画像を受け取り、新しいウィンドウで表示することができました:
socket.binaryType = "arraybuffer";
socket.onmessage = function (msg)
{ var bytes = new Uint8Array(msg.data);
var blob = new Blob([bytes.buffer]);
window.open(URL.createObjectURL(blob),'Name','resizable=1');
};