canvasを画像に変換する方法(toDataURL())!②
さて、DataURLというものがわかったところで
canvasの描画を画像化する方法を説明します。
もし、DataURLってそもそもなんだ?って方は
前回の記事を読んでみてください。
では、canvasの描画を画像化してみましょう。
以下はjQueryを使用していると仮定しています。
HTML
<canvas width="500" height="300" id="canvas"></canvas>
<img id="sample_image" alt="" />
JavaScript
//すでに描画が終わっているとして・・・ var canvas = $("#canvas")[0]; var img_src = canvas.toDataURL("image/png"); $("#sample_image").attr("src",img_src);
これで#sample_imageのimageタグにcanvasをPNG画像化したものが表示されます。
これをPHPなどサーバサイドでサーバに保存することもできますし、
chromeならばドラッグ&ドロップでディスクトップに保存することもできます。
IEなら「名前を付けて画像を保存」してください。
さて、ボタンをクリックしたら画像化して表示するなどの処理をしたい場合のために関数化だけしておきましょう。
/*
引数:
1.画像化したいcanvas要素のオブジェクト
2.画像を挿入(表示)したいimage要素のオブジェクト
*/
function toImg(canvas,img){ var img_src = canvas.toDataURL("image/png"); img.attr("src",img_src); }
ちなみに、toDataURL()の引数は
image/png
image/jpeg
の2種類です。
前者がPNG形式で出力
後者がJPEG形式で出力するためのパラメータです。
実際に画像化まで実装したお絵かきツールのプラグインを作成してありますので、
以下から自由に使ってください。