如何從Java websocket服務器發送圖像以在HTML5畫布中使用？

Question

我有一個用Java實現的WebSocket服務器。 當客戶端連接時，我想通過此連接發送圖像，以便客戶端在canvas元素中使用。 我提出了以下服務器代碼：

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：Value無法轉換為以下任何一個：HTMLImageElement，HTMLCanvasElement，HTMLVideoElement。”。

我知道使用WebSockets這不是將圖像發送到客戶端的最佳方式。 發送圖像后，WebSocket僅用於發送文本消息。

對於要應用於畫布的圖像，我需要更改哪些內容？

使用的資源：

如何在java中將圖像轉換為字節數組？

在WebSocket中接收Blob並在Canvas中呈現為圖像

Answer 1

嘗試在發送之前將圖像轉換為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的鏈接