Wie kann ein als Byte-Array in HTML / JavaScript gespeichertes Bild angezeigt werden? [geschlossen]

Ich schreibe eine Webseite in HTML / JavaScript. Ich lade mit AJAX ein Bild von meinem Backend herunter. Das Bild wird als Rohbyte-Array dargestellt, nicht als URL, daher kann ich den Standardansatz nicht verwenden <img src="{url}">.

Wie zeige ich dem Benutzer das erwähnte Bild an?

javascript html

— cubuspl42
quelle

Mögliches Duplikat der Anzeige des Byte-Arrays als Bild mit JavaScript

— Suresh Atta

OutputStream o = resp.getOutputStream (); o.write (imageInBytes);

Ich habe Angst zu fragen, aber die Neugier gewinnt ... Warum ist das nicht zum Thema?

— cubuspl42

Ich denke nicht, dass dieses Problem nicht zum Thema gehört.

— Metasoarous

139

Versuchen Sie, dieses HTML-Snippet in Ihr bereitgestelltes Dokument einzufügen:

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

Auf der JavaScript-Seite können Sie dann das Bildattribut srcmit der sogenannten Daten-URL dynamisch ändern .

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

Alternativ können Sie jQuery verwenden:

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

Dies setzt voraus, dass Ihr Bild im PNG-Format gespeichert ist, was sehr beliebt ist. Wenn Sie ein anderes Bildformat (z. B. JPEG) verwenden, ändern Sie den MIME-Typ ( "image/..."Teil) in der URL entsprechend.

Ähnliche Fragen:

— Sridhar R.
quelle

Mein Byte = dwr / download / k1a3JvBCfU3vLji $ zKkhQObxzck. src = Daten: image / png; base64, dwr / download / k1a3JvBCfU3vLji $ zKkhQObxzck. Ich habe DWR

Bild im Byte-Format herunterladen.

— Diamond King

Spät zur Party, aber wenn Ihre Antwort so aussieht [137,80,78,71,13,10,26,10,0,...], können Sie diese Zeile verwenden:

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'- '31.

Ich habe die Antwort ein wenig bearbeitet, um sie klarer zu machen, aber ich bekomme keine Sache, also habe ich sie nicht wirklich behoben. Warum geht diese Antwort davon aus, dass das Bild in einer base64-Zeichenfolge gespeichert ist? Das OP erwähnte (und ich überprüfte den Bearbeitungsverlauf) ein "Byte-Array", nicht "base64-Zeichenfolge".

— cubuspl42

@ Joel'- 'Das hat bei mir funktioniert, Thnks

— Mohammad Hossein Ganjyar