데이터 URL을 HTML5 캔버스에 이미지로 그리는 방법

데이터 URL을 HTML5 캔버스에 이미지로 그리기

데이터 URL(data URL)이 있다면 이를 활용해 캔버스(Canvas)에 이미지를 간단히 그릴 수 있습니다. 기본적인 방법은 Image 객체를 생성하고, 해당 객체의 src 속성에 데이터 URL을 할당하는 것입니다.

var myImg = new Image();
myImg.src = strDataURI;

drawImage() 메서드란?

캔버스에 실제로 이미지를 그릴 때는 drawImage() 메서드를 사용합니다. 이 메서드는 이미지뿐만 아니라 다른 캔버스나 비디오 요소도 캔버스 위에 그릴 수 있습니다.

또한 drawImage()는 다음과 같은 유연한 기능도 제공합니다.

• 이미지의 일부 영역만 잘라서 그리기
• 이미지 크기를 확대 또는 축소하여 그리기

onload 이벤트를 활용한 안전한 이미지 로딩

이미지가 완전히 로드되기 전에 캔버스에 그리려고 하면 빈 화면이 나타날 수 있습니다. 따라서 아래와 같은 순서로 코드를 작성하는 것이 올바른 방법입니다.

1. Image 객체 생성
2. onload 이벤트 핸들러를 등록하여 로드된 이미지를 캔버스에 그리도록 설정
3. 마지막으로 src 속성에 데이터 URL 지정

// 데이터 URL에서 이미지 불러오기
var img = new Image();
img.onload = function() {
    context.drawImage(img, 0, 0);
};
img.src = dataURL;

위 코드에서 drawImage(img, 0, 0)은 이미지를 캔버스의 좌표 (0, 0), 즉 왼쪽 상단 모서리에 원본 크기 그대로 그린다는 의미입니다. 이미지 로딩이 완료된 후에만 그리기 작업이 실행되므로, 어떤 환경에서도 안정적으로 동작합니다.