HTML5のcanvasを印刷する方法
canvasタグによる描画に対応しているブラウザであっても、印刷してみると空白になってしまう場合が多い。また、PDFに変換したい場合なども、同様にcanvasが上手く表示されないことがある。
canvasを扱うJavascriptにはtoDataURL()メソッドというものが用意されていて、canvasタグに描画したイメージをPNGかJPEG画像に変換してimgタグに渡すことができる。
まず、普通にcanvasを使うと下記のようになる。
<canvas id="canvas_area1" width="100" height="100">canvas test</canvas>
var canvas = document.getElementById('canvas_area1');
var ctx = canvas.getContext('2d');
ctx.strokeRect(25, 25, 50, 50);
このcanvasでの描画が印刷されなくて困るという話なので、toDataURL()メソッドを使って画像として表示させてみる。
下記２つの図形は、上がcanvasタグによる描画で、下がそれをPNG画像に変換してimgタグで表示したものだ。透過処理が効くのでJPEGよりもPNGがおすすめ。
図形を右クリックしてみると、コンテキストメニューが異なるので分かるだろう。
<canvas id="canvas_area2" width="100" height="100">canvas test</canvas> <img src="" width="100" height="100" id="image2" />
var canvas = document.getElementById('canvas_area2');
var ctx = canvas.getContext('2d');
ctx.strokeRect(25, 25, 50, 50);
var img_png_src = canvas.toDataURL();
document.getElementById("image2").src = img_png_src;
ただし、これだと同じ図形が２個表示されてしまうので、canvasタグは表示しないようにstyle="visibility:hidden;"を設定する。
下記のようにimgタグによる図形のみ表示される。
このページを全選択してみると分かるが、表示されていないcanvasタグも領域だけは確保されているので、配置によってはレイアウトが崩れるかも知れない。
<img src="" width="100" height="100" id="image3" /><canvas id="canvas_area3" width="100" height="100" style="visibility:hidden;">canvas test</canvas>
var canvas = document.getElementById('canvas_area3');
var ctx = canvas.getContext('2d');
ctx.strokeRect(25, 25, 50, 50);
var img_png_src = canvas.toDataURL();
document.getElementById("image3").src = img_png_src;
JPEGに変換する場合は下記のようになるが、透過できないので、色指定などを何もしないとキャンバスが真っ黒になってしまう。
<img src="" width="100" height="100" id="image4" /><canvas id="canvas_area3" width="100" height="100" style="visibility:hidden;">canvas test</canvas>
var canvas = document.getElementById('canvas_area3');
var ctx = canvas.getContext('2d');
ctx.strokeRect(25, 25, 50, 50);
var img_jpg_src = canvas.toDataURL("image/jpeg");
document.getElementById("image4").src = img_jpg_src;