[JavaScript] 로컬 디렉토리 이미지 Base64로 인코딩하기

2021.11.02 - [Front-end] - [Javascript / CSS / HTML ] 내 컴퓨터에 저장된 이미지 업로드 하기(화면에 업로드된 이미지 보여주기)

[Javascript / CSS / HTML ] 내 컴퓨터에 저장된 이미지 업로드 하기(화면에 업로드된 이미지 보여주기)

내 컴퓨터에 저장된 이미지를 웹으로 띄웠을 때 이것을 서버에 저장한 후, 추후 웹페이지 로드 시 서버에 저장된 모든 이미지들을 불러와야 했다.

처음엔 단순히 이미지 경로를 받아와서 경로를 파이썬 api로 넘겨 파이썬 상에서 바이너리 파일로 인코딩해서 mongodb에 저장하려고 했으나.. 보안상의 문제로 파일 경로를 얻어오면 C:/fakepath/img.jpg 이런식으로 경로가 다 숨겨져서 나온다.. 

이 문제를 해결하려고.. 구글링을 통해 몇시간 동안 사투를 벌였지만.. 결국 해결하지 못하고 다른 방식으로 저장할 방법은 없을까 하다가 HTML img 태그는 base64 형식의 이미지도 띄울 수 있다는 것을 알게 되었다.

그래서 자바스크립트로 이미지를 Base64 인코딩하여 띄우는 방법을 소개한다.

---

생각보다 간단했다.

img 파일 Base64 인코딩 함수

function imgToBase64ByFileReader(url) {
    return new Promise((resolve, reject) => {
        let xhr = new XMLHttpRequest();
        xhr.onload = () => {
            let reader = new FileReader();
            reader.onloadend = function () {
                resolve(reader.result);
                document.getElementById('img-id').setAttribute('src', reader.result);
            }
            reader.readAsDataURL(xhr.response);
        }
        xhr.open('GET', url);
        xhr.responseType = 'blob';
        xhr.send();
    });
}

 

자바 스크립트의 FileReader와 XMLHttpRequest 객체를 이용하면 간단하게 구현할 수 있다.

• Promise 객체 : 비동기 작업이 맞이할 미래의 완료 또는 실패와 그 결과 값을 나타낸다.
  Promise.resolve( ) -> 주어진 값으로 이행하는 Promise 객체를 반환
  
• XMLHttpRequest 객체 : 서버와 상호작용하기 위하여 사용, 전체 페이지의 새로고침 없이도 URL 로부터 데이터를 받아올 수 있다. 웹 페이지가 사용자가 하고 있는 것을 방해하지 않으면서 페이지의 일부를 업데이트할 수 있도록 해준다.
• FileReader 객체 : 웹 애플리케이션이 비동기적으로 데이터를 읽기 위하여 읽을 파일을 가리키는 File 혹은 Blob 객체를 이용해 파일의 내용을 읽고 사용자의 컴퓨터에 저장하는 것을 가능하게 해준다.

 

FileReader로 이미지 url을 읽어 해당 이미지를 Base64로 인코딩 해준다.

함수에서 인코딩한 값을 img src로 설정해주었기 때문에 서버측으로 보낼 때는 img 태그의 src 값을 얻어와서 보내면 된다.

 

---

2021.11.03 - [Back-end/Python] - [Python Flask] 플라스크와 AJAX로 서버 이미지 업로드, 다운로드

[Python Flask] 플라스크와 AJAX로 서버 이미지 업로드, 다운로드

자세한 예제는 위 포스트에서 확인