Base64와 base64 이미지 데이터 인코딩하여 사용하기

Base64와 base64 이미지 데이터 인코딩하여 사용하기

 

백단에서 넘겨주는 바이너리 데이터를 이용하여 앞단에서 이미지를 보여줘야하는 상황이 생겨 base64로 인코딩하여 이미지를 나타내는 방법을 정리한다.

 

base64란?

바이너리 데이터를 텍스트로 변경하는 인코딩 방식중 하나이며 문자 코드에 영향을 받지 않는 공통 64개의 ASCII 영역의 문자들로 이루어진 문자열로 변경해준다.

 

인코딩

 

서버에서 바이너리 데이터를 base64로 인코딩하여 넘겨준다.

 return connection.request()
 .query(query)
 .then(result => {
 for(var i in result.recordset){
 const bast64str= result.recordset[i].data.toString('base64'); // 인코딩
 result.recordset[i].data=bast64str;
 }
 res.send(result.recordset);

 

이미지 넣기

 

fetch문을 통하여 인코딩 데이터를 가져와 아래 형식처럼 src를 넣어준다.

const bs64=result[i].data;
const img=document.getElementById('img');
img.src= "data:image/png;base64,"+bs64;

 

기본 형태  
data:[<mediatype>][;base64],<data>

HTML ➡︎ img태그 src  
<img src="data:image/<이미지확장자>;base64,<data코드>")

CSS ➡︎ background-image  
background-image: url('data:image/<이미지확장자>;base64,<data코드>')