[JavaScript] 자바스크립트에서 Base64 형식 이미지 표시하기

187_자바스크립트에서 Base64 형식 이미지 표시하기

[적용]

• 프로그램으로 생성한 이미지 데이터를 표시하고 싶을 때

---

[내용]

JPEG와 PNG 파일은 바이너리(Binary) 파일이므로 텍스트 에디터로 열 수 없지만,

Base64를 사용하면 이미지를 문자열 상태로 관리할 수 있다.

자바스크립트는 Base64 문자열을 사용해 src 속성에 해당 문자열을 대입하여 이미지를 표시할 수 있다.

Base64의 시작 문자열은 'data:image/jpeg;base64' 또는 'data:image/png;base64' 이다.

 

HTML                                                                                                                                                              index.html

<img id="myImage" />

JavaScript                                                                                                                                                          main.js

const img = document.querySelector('#myImage');
img.src = 'data:image/jpeg;base64,/9j/4...생략... MD8+5//2Q ==';

 

Base64는 다음 상황에서 사용할 수 있다.

• 자바스크립트만으로 자료를 관리하고 싶을 때
• 데이터베이스에 문자열 형태로 이미지가 보관되어 있을 때
• 서버의 자료를 문자열 형태로 받았을 때
• 캔버스 요소를 문자열로 보관했을 때

 

 

---

 

 

 

 

 

참조 :
실무에 바로 적용하는 자바스크립트 코드레시피 278
아케다 야스노부, 카노 타케시 지음 / 이춘혁 옮김