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

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

Boję się zapytać, ale ciekawość zwycięża ... Dlaczego to nie na temat?

— cubuspl42

Nie sądzę, żeby ten problem był nie na temat.

— metasoarous

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

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

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

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

@ Joel'- 'To zadziałało dla mnie, Thnks

— Mohammad Hossein Ganjyar