Jak wyświetlić obraz przechowywany jako tablica bajtów w HTML / JavaScript? [Zamknięte]

83

Piszę stronę internetową w HTML / JavaScript. Pobieram obraz z mojego zaplecza za pomocą AJAX. Obraz jest reprezentowany jako nieprzetworzona tablica bajtów, a nie adres URL, więc nie mogę zastosować standardowego <img src="{url}">podejścia.

Jak wyświetlić wspomniany obraz użytkownikowi?

javascript html cubuspl42
źródło
możliwy duplikat wyświetlania tablicy bajtów jako obrazu przy użyciu JavaScript
Suresh Atta
OutputStream o = resp.getOutputStream (); o.write (imageInBytes);
1
Boję się zapytać, ale ciekawość zwycięża ... Dlaczego to nie na temat?
cubuspl42
Nie sądzę, żeby ten problem był nie na temat.
metasoarous

Odpowiedzi:

141

Spróbuj umieścić ten fragment kodu HTML w wyświetlanym dokumencie:

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

Następnie po stronie JavaScript można dynamicznie modyfikować srcatrybut obrazka za pomocą tzw. Data URL .

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

Alternatywnie, używając jQuery:

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

Zakłada się, że twój obraz jest przechowywany w formacie PNG, który jest dość popularny. Jeśli używasz innego formatu obrazu (np. JPEG), odpowiednio zmodyfikuj typ MIME ( "image/..."część) w adresie URL.

Podobne pytania:

Sridhar R
źródło
2
Mój bajt = dwr / download / k1a3JvBCfU3vLji $ zKkhQObxzck. src = dane: image / png; base64, dwr / download / k1a3JvBCfU3vLji $ zKkhQObxzck. Użyłem DWR
Pobieranie obrazu w formacie bajtowym.
Diamond King
2
Spóźniony na przyjęcie, ale jeśli wygląda Twoja odpowiedź [137,80,78,71,13,10,26,10,0,...], możesz skorzystać z tej linii: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
Poprawiłem nieco odpowiedź, aby była bardziej przejrzysta, ale nie dostaję jednej rzeczy, więc tak naprawdę tego nie naprawiłem. Dlaczego ta odpowiedź zakłada, że ​​obraz jest przechowywany w ciągu base64? OP wspomniał (i sprawdziłem historię edycji) o „tablicy bajtów”, a nie o „ciągu base64”.
cubuspl42
1
@ Joel'- 'To zadziałało dla mnie, Thnks
Mohammad Hossein Ganjyar