« | »

2014.10.05

HTML5 : display and print out <canvas> converted to <img>

HTML5のcanvasを印刷する方法

canvasタグによる描画に対応しているブラウザであっても、印刷してみると空白になってしまう場合が多い。また、PDFに変換したい場合なども、同様にcanvasが上手く表示されないことがある。

canvasを扱うJavascriptにはtoDataURL()メソッドというものが用意されていて、canvasタグに描画したイメージをPNGかJPEG画像に変換してimgタグに渡すことができる。

まず、普通にcanvasを使うと下記のようになる。

canvas test


このcanvasでの描画が印刷されなくて困るという話なので、toDataURL()メソッドを使って画像として表示させてみる。
下記2つの図形は、上がcanvasタグによる描画で、下がそれをPNG画像に変換してimgタグで表示したものだ。透過処理が効くのでJPEGよりもPNGがおすすめ。
図形を右クリックしてみると、コンテキストメニューが異なるので分かるだろう。

canvas test


ただし、これだと同じ図形が2個表示されてしまうので、canvasタグは表示しないようにstyle="visibility:hidden;"を設定する。
下記のようにimgタグによる図形のみ表示される。
このページを全選択してみると分かるが、表示されていないcanvasタグも領域だけは確保されているので、配置によってはレイアウトが崩れるかも知れない。



JPEGに変換する場合は下記のようになるが、透過できないので、色指定などを何もしないとキャンバスが真っ黒になってしまう。