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

82

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);
1
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

Antworten:

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
2
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
2
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.
1
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
1
@ Joel'- 'Das hat bei mir funktioniert, Thnks
Mohammad Hossein Ganjyar