JavaScript로 이미지를 Base64 문자열로 변환하는 방법

JavaScript에서 이미지를 Base64 문자열로 변환하려면 FileReader API를 사용하면 됩니다. FileReader는 파일이나 Blob 데이터를 읽어 Data URL(즉, Base64로 인코딩된 문자열) 형식으로 변환해 주는 브라우저 내장 API입니다.

변환 과정의 기본 원리

이미지를 Base64 문자열로 바꾸는 과정은 크게 다음 세 단계로 이루어집니다.

이미지 가져오기 — XMLHttpRequest(또는 fetch)를 사용해 이미지 URL로부터 이미지를 Blob 형태로 받아옵니다.
Blob 읽기 — FileReader의 readAsDataURL() 메서드를 호출하여 Blob을 Base64 Data URL로 변환합니다.
결과 확인 — onloadend 이벤트가 발생하면 fileReader.result 속성을 통해 변환된 Base64 문자열을 얻을 수 있습니다.

예제 코드

다음 코드를 실행하면 지정한 이미지에 대한 Base64 문자열을 얻을 수 있습니다.

<!DOCTYPE html>
<html>
   <body>
      <script>
         function toDataURL(url, callback) {
            var httpRequest = new XMLHttpRequest();
            httpRequest.onload = function() {
               var fileReader = new FileReader();
                  fileReader.onloadend = function() {
                     callback(fileReader.result);
                  }
                  fileReader.readAsDataURL(httpRequest.response);
            };
            httpRequest.open('GET', url);
            httpRequest.responseType = 'blob';
            httpRequest.send();
         }
         toDataURL('https://www.tutorialspoint.com/videotutorials/images/tutor_connect_home.jpg', function(dataUrl) {
         document.write('Result in string:', dataUrl)
      })
      </script>
   </body>
</html>

코드 설명

toDataURL(url, callback) 함수는 이미지 URL과 결과를 처리할 콜백 함수를 매개변수로 받습니다.
XMLHttpRequest의 responseType을 'blob'으로 설정하여 이미지를 Blob 객체로 받아옵니다.
요청이 완료되면(onload) 새로운 FileReader 객체를 생성하고, readAsDataURL()로 Blob을 읽습니다.
읽기가 끝나면(onloadend) fileReader.result에 담긴 Base64 문자열이 콜백 함수로 전달됩니다.

참고 사항

최신 브라우저 환경에서는 XMLHttpRequest 대신 fetch API를 사용하면 더 간결하게 작성할 수 있습니다. 또한 외부 도메인의 이미지를 변환할 때는 해당 서버가 CORS(Cross-Origin Resource Sharing)를 허용해야 정상적으로 동작한다는 점에 유의하세요.