JavaScript로 이미지를 Base64 데이터 URL로 변환하는 방법

웹 개발을 하다 보면 이미지 파일을 Base64 형식의 데이터 URL(데이터 URI)로 변환해야 하는 경우가 종종 있습니다. 예를 들어 이미지를 서버에 업로드하기 전에 미리보기를 구현하거나, 외부 요청 없이 이미지를 HTML에 직접 삽입할 때 유용합니다.

변환 원리

JavaScript를 사용하여 HTML 페이지의 <img> 태그에 표시된 이미지를 데이터 URI로 변환하는 과정은 다음과 같습니다.

먼저 canvas 요소를 생성하고, 이미지와 동일한 크기로 캔버스의 너비와 높이를 설정합니다. 그다음 캔버스 위에 이미지를 그린 후, 마지막으로 toDataURL() 메서드를 호출하면 Base64로 인코딩된 데이터 URI 문자열이 반환됩니다.

예제 코드

예를 들어 id가 my-image인 이미지가 있다면 아래 코드처럼 변환할 수 있습니다.

function getDataUrl(img) {
    // 캔버스 생성
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');
    // 너비와 높이 설정
    canvas.width = img.width;
    canvas.height = img.height;
    // 캔버스에 이미지 그리기
    ctx.drawImage(img, 0, 0);
    return canvas.toDataURL('image/jpeg');
}
// 이미지 선택
const img = document.querySelector('#my-image');
img.addEventListener('load', function (event) {
    const dataUrl = getDataUrl(event.currentTarget);
    console.log(dataUrl);
});

실행 결과

위 코드를 실행하면 콘솔에 다음과 같은 형태의 Base64 데이터 URI가 출력됩니다.

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAZAAAADSCAMAAABThmYtAAAAXVB

주의 사항

toDataURL() 메서드의 인자로 'image/jpeg', 'image/png', 'image/webp' 등 원하는 MIME 타입을 지정할 수 있으며, 지정하지 않으면 기본값인 PNG 형식으로 반환됩니다.

또한 한 가지 중요한 제약 사항이 있습니다. 외부 도메인에서 불러온 이미지는 CORS(교차 출처 리소스 공유) 정책으로 인해 캔버스가 오염(tainted)되어 toDataURL() 호출 시 보안 오류가 발생할 수 있습니다. 이 경우 이미지를 제공하는 서버에서 적절한 CORS 헤더를 설정하거나, img.crossOrigin = 'anonymous' 속성을 사용해야 합니다.