HTML5 캔버스를 원하는 크기로 잘라내는 방법
HTML5 캔버스(Canvas) 작업을 하다 보면 전체 캔버스가 아니라 특정 너비와 높이만큼 잘라낸 영역을 이미지로 내보내야 할 때가 있습니다. 이럴 때 가장 효과적인 방법은 임시 캔버스(temporary canvas)를 활용하는 것입니다.
핵심 아이디어는 간단합니다. 원본 캔버스의 내용을 원하는 크기로 만든 임시 캔버스에 복사한 후, 임시 캔버스에 toDataURL() 메서드를 호출하여 이미지 데이터를 추출하면 됩니다.
구현 단계별 코드 예제
1단계: 원본 캔버스 가져오기 및 배경색 지정
먼저 대상 캔버스의 컨텍스트를 얻고, 투명한 배경 뒤에 배경색을 채우기 위해 globalCompositeOperation 속성을 "destination-over"로 설정합니다. 이 값은 기존에 그려진 내용 아래에 새로운 도형을 그리는 합성 방식으로, 배경색 추가에 적합합니다.
var c = document.getElementsByTagName("canvas");
var ctx = c[0].getContext("2d");
// 원본 캔버스의 픽셀 데이터 백업
var data = ctx.getImageData(0, 0, c[0].width, c[0].height);
// 기존 그림 뒤에 배경색 채우기
var compositeOperation = ctx.globalCompositeOperation;
ctx.globalCompositeOperation = "destination-over";
ctx.fillStyle = "#800000"; // 진한 붉은색 배경
ctx.fillRect(0, 0, c[0].width, c[0].height);2단계: 임시 캔버스 생성 및 크기 지정
다음으로 document.createElement("canvas")를 사용해 화면에는 보이지 않는 임시 캔버스를 만들고, 잘라낼 최종 크기를 지정합니다. 여기서는 너비 550px, 높이 280px로 설정했습니다.
var tempCanvas = document.createElement("canvas"),
tCtx = tempCanvas.getContext("2d");
tempCanvas.width = 550;
tempCanvas.height = 280;
// 원본 캔버스를 임시 캔버스에 복사
tCtx.drawImage(c[0], 0, 0);3단계: toDataURL()로 이미지 내보내기
마지막으로 임시 캔버스에 toDataURL() 메서드를 호출하면, 지정한 크기로 잘라낸 캔버스가 PNG 형식의 데이터 URL 문자열로 변환됩니다. 이 값을 <img> 태그의 src에 넣거나 다운로드 링크로 활용할 수 있습니다.
var imgData = tempCanvas.toDataURL(); console.log(imgData); // "data:image/png;base64,..."
주요 포인트 정리
- getImageData(): 원본 캔버스의 픽셀 데이터를 읽어 필요 시 복원할 수 있게 백업해 둡니다.
- destination-over: 기존 그림 뒤에 색을 채워 투명 배경 문제를 해결합니다.
- drawImage(): 원본 캔버스를 임시 캔버스에 그대로 복사하며, 좌표와 크기를 조절해 원하는 영역만 잘라낼 수도 있습니다.
- toDataURL(): 캔버스 내용을 PNG(기본값) 또는 JPEG 등의 데이터 URL로 변환합니다.
이처럼 임시 캔버스를 중간 단계로 활용하면 원본을 훼손하지 않으면서도 원하는 크기의 이미지를 손쉽게 추출할 수 있습니다.