5

Jetty 8.1.2 WebSockets を使用して、バイナリ データ (画像) を JavaScript クライアントに送信しようとしています。

ウェブソケット Java コード:

BufferedImage image = getTheImage();

ByteArrayOutputStream baos = new ByteArrayOutputStream();
ImageIO.write(image, "jpg", baos);
baos.flush();
byte[] imageInBytes = baos.toByteArray();
baos.close();

socket.getConnection().sendMessage(imageInBytes, 0, imageInBytes.length);

JavaScript コード:

binarySocket.onmessage = function(event) {
if (event.data instanceof ArrayBuffer) {
    var bytearray = new Uint8Array(event.data);

    var tempcanvas = document.createElement('canvas');
    tempcanvas.height = imageheight;
    tempcanvas.width = imagewidth;
    var tempcontext = tempcanvas.getContext('2d');

    var imgdata = tempcontext.getImageData(0, 0, imagewidth,imageheight);
    var imgdatalen = imgdata.data.length;

    for ( var i = 8; i < imgdatalen; i++) {
        imgdata.data[i] = bytearray[i];
    }

    tempcontext.putImageData(imgdata, 0, 0);

    var img = document.createElement('img');
    img.height = imageheight;
    img.width = imagewidth;
    img.src = tempcanvas.toDataURL();
    chatdiv = document.getElementById('chatdiv');
    chatdiv.appendChild(img);
    chatdiv.innerHTML = chatdiv.innerHTML + "<br />";
}

};

イメージをディスクに書き込めばコードは問題ありませんが、イメージを HTML ページに表示しようとすると、ランダムな色のイメージが表示されます。おそらく画像を間違った方法でエンコードしています。

画像をバイナリデータとして送信し、javascript で表示する方法はありますか?

4

2 に答える 2

3

あなたが正しいです。問題は画像のエンコードです。

交換：

img.src = tempcanvas.toDataURL();

に

img.src = tempcanvas.toDataURL("image/jpeg");

デフォルトの形式は PNG です。

于 2013-04-10T21:09:48.143 に答える