HTML / JavaScript에서 바이트 배열로 저장된 이미지를 표시하는 방법은 무엇입니까? [닫은]

HTML / JavaScript로 웹 페이지를 작성하고 있습니다. AJAX를 사용하여 백엔드에서 이미지를 다운로드하고 있습니다. 이미지는 URL이 아닌 원시 바이트 배열로 표시되므로 표준 <img src="{url}">접근 방식을 사용할 수 없습니다 .

언급 된 이미지를 사용자에게 어떻게 표시합니까?

javascript html

— cubuspl42
소스

가능 중복 자바 스크립트를 이용하여 화상으로 바이트 배열을 디스플레이

— 수레 쉬 아타

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

물어보기가 두렵지 만 호기심이 이깁니다.

— cubuspl42

나는이 문제가 주제에서 벗어난 것이라고 생각하지 않는다.

— metasoarous

141

이 HTML 스 니펫을 제공된 문서에 넣으십시오.

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

그런 다음 JavaScript 측에서 데이터 URL을src 사용하여 이미지의 속성을 동적으로 수정할 수 있습니다 .

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을 사용했습니다

바이트 형식 이미지 다운로드.

— Diamond King

파티에 [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,...])));

— 늦었지만

더 명확하게하기 위해 답변을 약간 수정했지만 한 가지가 없어서 실제로 수정하지 않았습니다. 이 대답은 이미지가 base64 문자열에 저장되어 있다고 가정하는 이유는 무엇입니까? OP는 "base64 문자열"이 아닌 "바이트 배열"을 언급하고 편집 내역을 확인했습니다.

— cubuspl42

@ Joel'- '의이 Thnks 나를 위해 일한

— 모하마드 호세인 Ganjyar