プログラミングで飯を食え。腕をあげたきゃ備忘録!

PHP、JavaScript、HTML5、CSS3などWEB系言語を中心に基本テク、備忘録をまとめます。Android、Iphoneアプリ開発についても!

canvasを画像に変換する方法(toDataURL())!②

サクウェブTVはコチラ↓↓↓
サクウェブTV

さて、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タグにcanvasPNG画像化したものが表示されます。

これを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形式で出力するためのパラメータです。

実際に画像化まで実装したお絵かきツールプラグインを作成してありますので、

以下から自由に使ってください。

http://senoway.hatenablog.com/entry/2013/06/01/031831