HTML5 캔버스를 PNG 파일로 변환하는 방법

HTML5 캔버스(Canvas)에 그려진 내용을 PNG 이미지 파일로 저장하려면 몇 가지 단계를 거쳐야 합니다. 핵심 원리는 캔버스의 내용을 데이터 URL(data URL)로 변환한 뒤, 이를 다운로드 링크에 연결하는 것입니다.

1. 캔버스를 데이터 URL로 변환하기

먼저 canvas.toDataURL() 메서드를 사용해 캔버스의 내용을 base64 인코딩된 PNG 데이터 URL로 변환합니다. 생성된 데이터 URL은 아래와 같은 형태를 가집니다.

<img src="data:image/png;base64,iOBVRw0KGgoAAAANSUhEUg...." class="image" />

2. <a> 태그의 href 속성에 데이터 URL 추가

생성된 데이터 URL을 <a> 태그의 href 속성에 넣으면 해당 링크를 클릭했을 때 이미지가 다운로드됩니다.

3. 파일 이름 지정하기

download 속성을 사용하면 저장될 파일의 이름을 직접 지정할 수 있습니다.

<a download="newimg.png" href="...">이미지 다운로드</a>

4. HTTP 헤더 정의하기

서버 측에서 처리하는 경우, 브라우저가 해당 응답을 첨부파일로 인식하도록 HTTP 헤더를 정의할 수 있습니다.

headers=Content-Disposition: attachment; filename=newimg.png

5. 브라우저 RAM 사용량 최적화

페이지 로드 시점에 모든 데이터 URL을 미리 생성하면 대용량 캔버스에서 메모리 사용량이 급증할 수 있습니다. 이를 방지하려면 사용자가 링크를 클릭하는 순간 데이터 URL을 동적으로 생성하는 것이 좋습니다.

// 클릭 시점에 데이터 URL을 동적으로 생성
function myCanvas() {
    var d = canvas.toDataURL('image/png');
    this.href = d;
};
d.addEventListener('click', myCanvas, false);

위 코드는 링크가 클릭될 때만 toDataURL()을 호출하여 href 값을 설정합니다. 이렇게 하면 불필요한 메모리 점유를 줄여 브라우저의 RAM 사용량을 효율적으로 관리할 수 있습니다.