데이터 URI란 무엇인가?
웹 개발을 하다 보면 HTML 페이지에 있는 이미지를 데이터 URI(Data URI) 형태로 변환해야 하는 경우가 종종 있습니다. 데이터 URI는 이미지 파일을 base64로 인코딩하여 문자열 형태로 표현한 것으로, 별도의 HTTP 요청 없이 이미지를 HTML이나 CSS에 직접 삽입할 수 있게 해주는 유용한 기술입니다.
변환 과정
JavaScript를 사용해 이미지 태그를 데이터 URI로 변환하는 절차는 다음과 같습니다.
<canvas>요소를 생성합니다.- 캔버스의 너비와 높이를 대상 이미지와 동일하게 설정합니다.
drawImage()메서드로 캔버스 위에 이미지를 그립니다.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);
});위 코드에서는 이미지가 완전히 로드된 후에 변환 작업을 수행하도록 load 이벤트 리스너를 등록했습니다. 이미지가 로드되기 전에 drawImage()를 호출하면 빈 캔버스가 만들어질 수 있으므로 반드시 이벤트 처리를 통해 실행 순서를 보장해야 합니다.
실행 결과
위 코드를 실행하면 콘솔에 다음과 같은 형식의 데이터 URI가 출력됩니다.
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAZAAAADSCAMAAABThmYtAAAAXVB
주의 사항
외부 도메인의 이미지를 변환할 때는 CORS(교차 출처 리소스 공유) 정책으로 인해 캔버스가 오염(tainted)되어 toDataURL() 호출 시 보안 오류가 발생할 수 있습니다. 이 경우 이미지 요소에 crossOrigin = "anonymous" 속성을 설정하거나, 서버 측에서 적절한 CORS 헤더를 제공하도록 구성해야 합니다.