3

Java で実装された WebSocket サーバーがあります。クライアントが接続すると、クライアントがキャンバス要素で使用するために、この接続を介して画像を送信したいと考えています。次のサーバーコードを思いつきました：

public void onOpen(Connection connection) {
    try {
        BufferedImage image = ImageIO.read(new File("image.jpg"));
        ByteArrayOutputStream baos = new ByteArrayOutputStream();
        ImageIO.write(image, "jpg", baos);
        byte[] byteArray = baos.toByteArray();
        connection.sendMessage(byteArray, 0, byteArray.length);
    } catch (Exception e ){
        System.out.println("Error: "+e.getMessage());
    }
}

クライアント側の Javascript は次のようになります。

onmessage : function(m) {
    if (m.data) {
        if (m.data instanceof Blob) {
            var blob = m.data;

            var bytes = new Uint8Array(blob);
            var image = context.createImageData(canvas.width, canvas.height);
            for (var i=0; i<bytes.length; i++) {
                image.data[i] = bytes[i];
            }
        }
    }
}

接続は機能し、データは送信されますが (blob.size の値は正しい)、イメージはキャンバスに描画されません。Firefox で、「TypeError: 値を次のいずれかに変換できませんでした: HTMLImageElement、HTMLCanvasElement、HTMLVideoElement.」というエラー メッセージが表示されます。

この WebSocket の使用は、画像をクライアントに送信する最良の方法ではないという事実を認識しています。画像を送信した後、WebSocket はテキスト メッセージの送信にのみ使用されます。

画像を送信してキャンバスに適用するには、何を変更する必要がありますか?

使用したリソース:

Javaでイメージをバイト配列に変換する方法は?

Blob を WebSocket で受け取り、Canvas で画像としてレンダリングする

4

1 に答える 1

2

送信する前に画像を base64 に変換してみてください。次に例を示します。

function drawImage(imgString){
    var canvas = document.getElementById("canvas");
    var ctx = canvas.getContext("2d");

    var image = new Image();
    image.src = imgString;
    image.onload = function() {
        ctx.drawImage(image, 0, 0);
    };
}

Javaで画像をbase64に変換する方法に関するリンクは次のとおりです

于 2013-12-14T05:04:32.580 に答える