Base64 인코딩 된 이미지 데이터를 웹 페이지 상에 표시하기

결과 요약부터 하고 진행하도록 하자.

img 태그의 src에 data:image/jpeg;base64,를 앞에 붙인 뒤, base64 데이터를 첨부하면 인코딩 된 jpeg데이터를 웹 페이지에 표시할 수 있다.

How to display raw image data with html and javascript, stackoverflow의 내용을 살펴보면, jsfiddle로 구현한 예제가 첨부되어있다. 예제가 크게 복잡하지 않으므로, 보면 쉽게 이해할 수 있다.

샘플 이미지 데이터의 준비

적당한 이미지가 없는 경우에는 PlaceIMG에서 샘플 이미지를 생성하여 다운로드 받도록 하자. 이후 ImageToBase64에 이미지를 업로드하게 되면, 이미지를 Base64로 압축한 데이터가 생성된다. 사이즈로 인해 Base64로 압축된 데이터의 첨부는 생략한다.

테스트

jsfiddle등을 사용해도 좋고, html파일을 생성한 후 브라우저로 파일을 열어도 된다. ImageToBase64에 이미지를 업로드한 후, Full Image Html의 내용을 body에 첨부하면 된다. 별다른 URL을 참조하지 않고도 RAW데이터가 페이지에 표시된다.

확인

이미지가 잘 표시되는 것을 확인할 수 있다.

이걸 어디다 써먹나요?

이미지를 어딘가에 퍼가고싶은데 호스팅 사이트가 마땅히 없다! 혹은 호스팅 사이트에 올린 다음에 링크를 따가기 너무 귀찮다! 싶은 경우에 써먹을 수 있다. <img src=(base64로 압축된 이미지)/>를 사용해서 html태그로 이미지를 첨부하는 것도 가능하며, Markdown Here를 이용해서 적용하는 것도 가능하다. 텍스트의 양은 길어지지만, 이미지의 양이 적다면 써볼만하다.

​