캔버스의 이미지 데이터 URL을 얻으려면 toDataURL() 메서드를 사용합니다. 이 메서드는 캔버스에 그려진 내용을 Base64로 인코딩된 PNG 형식의 데이터 URL 문자열로 변환해 줍니다.
toDataURL() 메서드란?
canvas.toDataURL()은 캔버스의 현재 화면 상태를 그대로 이미지 데이터로 직렬화하여 반환합니다. 기본 출력 형식은 PNG이며, 필요에 따라 매개변수를 지정해 JPEG나 WebP 같은 다른 이미지 형식으로도 변환할 수 있습니다.
- PNG(기본값): 배경이 투명하게 유지되며 무손실 압축을 지원합니다.
- JPEG:
toDataURL('image/jpeg')처럼 형식을 지정하며, 투명 배경은 검정색으로 채워집니다. - 품질 지정: JPEG나 WebP의 경우 두 번째 인수(0~1)로 압축 품질을 조절할 수 있습니다.
예제: 캔버스 그리기 및 이미지 데이터 변환
다음 코드를 실행하면 캔버스에 베지어 곡선으로 도형을 그린 뒤, 해당 내용을 이미지 데이터 URL로 변환할 수 있습니다.
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<canvas id="newCanvas" width="450" height="300"></canvas>
<script>
var canvas = document.getElementById('newCanvas');
var ctx = canvas.getContext('2d');
// 도형 그리기
ctx.beginPath();
ctx.moveTo(120, 50);
ctx.bezierCurveTo(130, 100, 130, 250, 330, 150);
ctx.bezierCurveTo(350, 180, 320, 180, 240, 150);
ctx.bezierCurveTo(320, 150, 420, 120, 390, 100);
ctx.bezierCurveTo(130, 40, 370, 30, 240, 50);
ctx.bezierCurveTo(220, 7, 350, 20, 150, 50);
ctx.bezierCurveTo(250, 5, 150, 20, 170, 80);
ctx.closePath();
ctx.lineWidth = 3;
ctx.fillStyle = '#F1F1F1';
ctx.fill();
ctx.stroke();
// 캔버스를 이미지 데이터 URL로 변환
var dataURL = canvas.toDataURL();
console.log(dataURL);
</script>
</body>
</html>
변환한 이미지를 파일로 다운로드하기
toDataURL()로 얻은 데이터 URL은 그 자체로 완성된 이미지입니다. 실제 PNG 파일로 저장하려면 아래처럼 <a> 태그의 download 속성을 활용하면 됩니다.
var link = document.createElement('a');
link.download = 'my-canvas.png';
link.href = dataURL;
link.click();
이 코드를 실행하면 브라우저가 자동으로 my-canvas.png 파일을 다운로드합니다. 이 방법은 그림판 앱, 차트 내보내기, 서명 입력 화면 등 캔버스 기반 기능에서 결과물을 이미지로 저장할 때 널리 활용됩니다.