HTML5のCanvas要素を印刷する方法【サンプルコード付き】

HTML5 Canvas要素を印刷するには

HTML5の<canvas>要素は、そのままの状態では印刷ダイアログから意図どおりに出力できないことがあります。そこで一般的なのが、Canvasの描画内容をPNG画像のデータURLに変換し、それを新しいブラウザウィンドウに表示してから印刷を実行するという手法です。

ここでは、代表的な2つの実装方法を紹介します。

方法1：printElementプラグインを使う

jQueryのprintElement系プラグインを利用すると、Canvas要素をシンプルな記述で印刷できます。まず、HTML側に印刷用のリンクを配置します。

<a href="javascript:print_canvas()">PRINT CANVAS</a>

function print_canvas()
{
    $("#canvas_voucher").printElement();
}

このコード内のcanvas_voucherは、印刷対象となるcanvas要素のIDです。この処理を正しく機能させるには、Canvasの内容を.png形式の画像URLへ変換し、それを新しいブラウザウィンドウで開く必要があります。その後、印刷ダイアログが自動的に表示され、ユーザーがページを印刷できるようになります。

方法2：toDataURL()で画像化して新規ウィンドウから印刷する

プラグインに頼らず、標準のJavaScriptだけで実装したい場合は、toDataURL()メソッドを使う方法が便利です。

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

この関数の処理の流れは次のとおりです。

• window.open()で新しいウィンドウ（またはタブ）を開く
• canvas.toDataURL()でCanvasの内容をPNG形式のデータURLに変換し、<img>タグとして書き出す
• win1.print()で印刷ダイアログを表示する
• win1.location.reload()でウィンドウを再読み込みして後片付けを行う

実装時の注意点

環境によっては、画像の読み込みが完了する前にprint()が呼ばれ、白紙や一部だけしか印刷されないケースがあります。その場合は、setTimeout()で印刷処理をわずかに遅らせるか、画像のonloadイベント後にprint()を実行すると安定します。

また、印刷後に自動的にウィンドウを閉じたい場合は、win1.close()を組み合わせるとユーザー体験が向上します。Canvasのサイズが大きい場合は、CSSでimgの幅を調整しておくと、用紙に収まりやすくなります。