HTML / JavaScriptでバイト配列として保存された画像を表示するにはどうすればよいですか？[閉まっている]

私はHTML / JavaScriptでウェブページを書いています。AJAXを使用してバックエンドから画像をダウンロードしています。画像はURLではなく生のバイト配列として表されるため、標準的な<img src="{url}">アプローチを使用することはできません。

上記の画像をユーザーに表示するにはどうすればよいですか？

javascript html

— cubuspl42
ソース

JavaScriptを使用してバイト配列を画像として表示

— Suresh Atta

OutputStream o = resp.getOutputStream（）; o.write（imageInBytes）;

質問するのは怖いですが、好奇心が勝ちます...なぜこれが話題から外れているのですか？

— cubuspl 4219

この問題は話題から外れているとは思いません。

— メタソアラス

141

このHTMLスニペットを提供されたドキュメントに入れてみてください。

<img id="ItemPreview" src="">

次に、JavaScript側で、srcいわゆるデータURLを使用して画像の属性を動的に変更できます。

document.getElementById("ItemPreview").src = "data:image/png;base64," + yourByteArrayAsBase64;

または、jQueryを使用します。

$('#ItemPreview').attr('src', `data:image/png;base64,${yourByteArrayAsBase64}`);

これは、画像が非常に人気のあるPNG形式で保存されていることを前提としています。他の画像形式（JPEGなど）を使用する場合は、それに応じてURLのMIMEタイプ（"image/..."一部）を変更します。

同様の質問：

— Sridhar R
ソース

私のバイト= dwr / download / k1a3JvBCfU3vLji $ zKkhQObxzck。src = data：image / png; base64、dwr / download / k1a3JvBCfU3vLji $ zKkhQObxzck。私はDWRを使用しました

バイト形式の画像のダウンロード。

— ダイヤモンドキング

パーティーに遅れましたが、応答が次のよう[137,80,78,71,13,10,26,10,0,...]になっている場合は、次の行を使用できます

document.getElementById("ItemPreview").src = "data:image/png;base64," + btoa(String.fromCharCode.apply(null, new Uint8Array([137,80,78,71,13,10,26,10,0,...])));

— 。– Joel '

答えをわかりやすくするために少し編集しましたが、1つも得られないため、実際には修正しませんでした。この回答は、画像がbase64文字列に格納されていると想定しているのはなぜですか？OPは、「base64文字列」ではなく「バイト配列」について言及しました（そして編集履歴を確認しました）。

— cubuspl 4219

@ Joel'- 'それは私のために働いた、Thnks

— Mohammad HosseinGanjyar20年