ByteBufferをHTMLのImageに変換するには

イメージをjavaのbytebufferに変換し、javaのwebsocketを通してクライアントに送信します。以下のような Java側の外観：クライアント側でByteBufferをHTMLのImageに変換するには

@OnOpen 
public void onOpen(Session sessions) { 
    String fileName = sessions.getUserPrincipal().getName() + ".png"; 
    File fi = new File("/Users/shilu/MyProject/Chat/Photo/" + fileName); 
    byte[] fileContent = null; 
    try { 
     fileContent = Files.readAllBytes(fi.toPath()); 
     ByteBuffer buf = ByteBuffer.wrap(fileContent); 
     sessions.getBasicRemote().sendBinary(buf); 
    } catch (IOException e) { 
     e.printStackTrace(); 
    } 
}

は、私はちょうどこのようにそれを得る：

gp.onmessage = function(evt) { 
    var msg = evt.data; 
};

を今どのように私はhtmlの...でその画像を表示していますか？画像のsrc属性にevt.dataを入れて

出典

2016-10-18 R . Shilesh

[バイト配列から設定のIMG SRC]の可能な重複（http://stackoverflow.com/questions/30129486/set- img-src-from-byte-array） – DimaSan

evtをバイト配列に変換するには？ –

てみ

gp.onmessage = function(evt) { 
    var msg = evt.data; 
    document.getElementById("image").src = msg; 
};

出典

2016-10-18 13:18:45 Vermicello

これは動作しません。動作するにはデータURIに変換する必要があります。 – jcubic

データURLに変換する方法 –

まずあなたがBASE64にデータを変換し、データURIを作成する必要があります。

var img = document.createElement('img'); 
img.src = 'data:image/jpg;base64,' + btoa(evt.data); 
document.body.appendChild(img);

出典

2016-10-18 13:23:05 jcubic

いいえ、動作しません。TypeErrorとしてnullが返されます。nullはオブジェクトではありません（ 'document.getElementById（ "＃profImg"）を評価しています）。src =' data：image/jpg; base64、 '+ btoa（evt.data）'） –

@ R.Shileshは '＃profImg'からハッシュを削除し、' getElementById'はidを受け付けません。 – jcubic

は既に作成された要素のソースを変更する方法を教えてくれます。 –

は、あなたのイメージは、Base64での符号化されたバイト変換返す前にjavaの文字列

StringUtils.newStringUtf8(Base64.encodeBase64(buf.array(), false));

その後、以下のようにHTMLファイルに画像を追加します。 <img src="data:image/jpg;base64,{base64String returned from java}"/>

出典

2016-10-18 13:45:36 Abhijeet

ByteBufferをHTMLのImageに変換するには

答えて

関連する問題