[Javascript] 자바스크립트를 사용하여 Image File Base64 Encodig 방법 / 이미지 등록 방법

이번 포스팅에서는 이미지를 Base64인코딩 된 문자열로 URL 형태로 표시하는 방법을 포스팅하겠습니다.

1. 개요

---

Mail에 이미지를 첨부할 경우가 생겼는데, 서버에 접근이 불가능한 상황이여서 이미지를 경로로 등록이 불가능한 상황이 발생했습니다. 그래서 해당 이미지를 Base64 인코딩을 통해 데이터를 문자로 변환시켜서 이미지를 보여주는 방식을 선택했습니다.

 

HTML에서 <img> 태그의 src 속성으로 해당 파일의 경로 또는 URL로 이미지 등록하는 방법 예시

-- 파일 경로
<img src="파일경로.jpg">
 
-- Base64로 인코딩 된 문자 사용
<img src="data:image/gif;base64,R0lGODlhvAIeAMQAAN7e4N/g4u/w8d7g213AA123SDp69nb3dL==>

2. HTML, Javascript 소스

---

HTML

<button onclick="openTextFile()">Image File Open</button> <br><hr><br> <div> <h1>Base64 Encode String</h1> <div id='output'></div> </div> <br><hr><br> <div> <h1>Select Image</h1> <img id="tartgetImg" > </div>

 

JavaScript

function openTextFile(){ var input = document.createElement("input"); input.type = "file"; input.accept = "image/*"; input.id = "uploadInput"; input.click(); input.onchange = function (event) { processFile(event.target.files[0]); }; } function processFile(file){ var reader = new FileReader(); reader.onload = function () { var result = reader.result; output.innerText = result document.getElementById('tartgetImg').setAttribute('src',result); }; reader.readAsDataURL( file ); }

3. 실행 화면

---

이미지를 선택하면 해당 파일의 바이너리 데이타를 Base64로 인코딩 해줘서 화면에 뿌려주고

그 인코딩 문자를 기반으로 이미지를 그려줍니다. 필요하신 분들은 아래 실행을 통해서 인코딩언어를 추출해 가시면 될것 같습니다.