JavaScript로 이미지를 데이터 URL(Data URI)로 변환하는 방법

웹 페이지에서 이미지 태그에 표시된 이미지를 JavaScript를 사용해 데이터 URI(data URI) 형태로 변환하려면 canvas 요소를 활용하면 됩니다. 변환 과정은 다음과 같습니다.

1. 새로운 canvas 요소를 생성합니다.
2. 캔버스의 너비와 높이를 이미지 크기와 동일하게 설정합니다.
3. 이미지를 캔버스 위에 그립니다.
4. 마지막으로 toDataURL() 메서드를 호출합니다.

이렇게 하면 이미지가 Base64로 인코딩된 데이터 URI 문자열이 반환됩니다. 이 데이터 URI는 CSS 배경 이미지, API 전송, 로컬 저장 등 다양한 용도로 활용할 수 있습니다.

예제 코드

예를 들어, id가 my-image인 이미지가 있다면 아래와 같은 코드로 데이터 URL을 얻을 수 있습니다.

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);
    // Base64 인코딩된 데이터 URI 반환
    return canvas.toDataURL('image/jpeg');
}

// 이미지 선택
const img = document.querySelector('#my-image');
img.addEventListener('load', function (event) {
    const dataUrl = getDataUrl(event.currentTarget);
    console.log(dataUrl);
});

실행 결과

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

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAZAAAADSCAMAAABThmYtAAAAXVB

주의 사항

데이터 URL을 정상적으로 얻으려면 몇 가지 유의해야 할 점이 있습니다.

• 이미지 로드 완료 후 처리: 이미지가 완전히 로드되기 전에 캔버스에 그리면 빈 결과가 나올 수 있으므로, 반드시 load 이벤트 이후에 변환 작업을 수행해야 합니다.
• CORS 제한: 외부 도메인의 이미지를 변환하려면 해당 서버에서 CORS(교차 출처 리소스 공유)를 허용해야 합니다. 그렇지 않으면 캔버스가 오염(tainted)되어 toDataURL() 호출 시 보안 오류가 발생합니다.
• MIME 타입 지정: toDataURL('image/jpeg')처럼 원하는 이미지 형식을 지정할 수 있으며, 기본값은 PNG입니다.