HTML5 캔버스(Canvas) 요소를 이미지로 변환해 인쇄하는 방법

HTML5 캔버스 요소 인쇄하기

HTML5의 <canvas> 요소에 그려진 내용을 사용자가 직접 인쇄할 수 있도록 만들고 싶다면, 캔버스를 이미지로 변환한 뒤 새 창에서 인쇄 대화상자를 호출하는 방식이 가장 간단하고 효과적입니다.

아래는 HTML5 캔버스 요소를 화면에 표시하는 기본 코드 예시입니다.

<a href = "javascript:print_voucher()">PRINT CANVAS</a>
function print_canvas()
{
    $("#canvas_voucher").printElement();
}

코드 설명

위 코드에서 canvas_voucher는 인쇄하려는 캔버스 요소의 ID입니다. 이 코드가 실제로 동작하려면 몇 가지 추가 처리가 필요합니다.

• 캔버스 내용을 .png 이미지 데이터 URL로 변환해야 합니다.
• 변환된 이미지를 새 브라우저 창으로 열어야 합니다.
• 새 창에서 인쇄 대화상자를 자동으로 실행시켜 사용자가 페이지를 인쇄할 수 있게 해야 합니다.

캔버스를 이미지로 변환하여 인쇄하는 함수

캔버스의 toDataURL() 메서드를 활용하면 캔버스에 그려진 내용을 손쉽게 PNG 형식의 이미지 URL로 변환할 수 있습니다. 아래 코드는 이 원리를 적용한 실제 구현 예시입니다.

function print_canvasr(){
    var win1 = window.open();
    win1.document.write("<br><img src = '"+canvas.toDataURL()+"'/>");
    win1.print();
    win1.location.reload();
}

동작 순서 정리

1. window.open()으로 새 브라우저 창을 엽니다.
2. canvas.toDataURL()로 캔버스 내용을 PNG 이미지 URL로 변환합니다.
3. 새 창에 해당 이미지를 삽입합니다.
4. win1.print()를 호출해 인쇄 대화상자를 띄웁니다.

이 방식은 쿠폰, 바우처, 영수증 등 캔버스로 생성된 시각적 결과물을 사용자에게 출력해야 하는 서비스에서 특히 유용하게 활용됩니다.