canvasのお絵描きツールにからピッカー機能をつけてみる


canvasのお絵描きツールを作っていくと、カラーピッカー機能をつけたいと思うようになったので実装してみることに。

最初は、jQuery UIのスライダーを使って実装しようと思ったのですが、探してみるともっとよさそうなJSColorというJavaScriptライブラリがあったのでそれを使って実装してみることに(参考:カラーピッカーをお手軽に設置できるJSライブラリ「JSColor」 | Web活メモ帳)。

HTMLに『<input class=”color” value=”000000″>』と記述し、JavaScript側には下記のようなコードを追加。

これで、カラーピッカーで色を選択するとCanvasのペンの色にも反映される。自分自身でカラーコードを入力しても反映されるのがいいですね。

ただ、基本的な色は今までどおり選択できるようにしたいところ。てっきり、テキストボックスにカラーコードを入れた後に、jQueryのtriggerでinputイベントを呼び出すようにすればできると思ったものの、それではできませんでした。
調べてみると、JSColorにはfromStringというメソッドがあるようで、その引数に色コードをいれることによって変更できた。

以下、動作サンプル。
canvasを使ったお絵描き投稿システム

ついでに、ペンの太さも変えられるようにし、その大きさも分かるようにしました。最初、divタグの大きさを変えて背景をペンの色と同じようにして対応しようと思ったものの、なんだかペンのほうが太く見えるので、新しいcanvasを追加して対応しました。
と思ったけど、どうもペンで書いた線の周りが少しぼやけているように見える。なんとかならないものだろうか・・・。

canvasのお絵描きツールをタッチパネル対応してみる


せっかくcanvasでお絵描きツールを作るならばタッチパネル対応ぐらいしたいところ。というわけで調べてみた。

調べてみると、マウスでいう、『mousedown』『mousemove』『mouseup』イベントはそれぞれタッチイベントだと『touchstart』『touchmove』『touchend』に対応しているよう。
というわけで、jQueryのmousedownイベントとtouchstartイベントで同じ処理を割り当てたい場合の基本は下記のようになる。

jQueryのonメソッドの第一引数で’touchstart mousedown’と指定し、タッチした時とマウスダウンした時に同じ関数をわりあてることができます。

このままだと、タッチをした時にデフォルトのブラウザスクロールイベントが発生してしまうので、関数内の最初に『e.preventDefault();』と記述してスクロールイベントを発生しないように記述。これを記述しないとうまくタッチパネルでお絵描きできないっぽいです。

つづいて、タッチした座標の取得について。マウスでは、『e.pageX』『e.pageY』でX座標とY座標が取得できたのだけれども、タッチではこれではうまくいかないらしい。調べてみると、jQueryのイベントオブジェクトの中にoriginalEventというプロパティがあるらしいので、その中の『changedTouches[0].pageX』でX座標が取得できるよう。
今回は、クリックとタッチイベントに同じ関数を割り当てるので下記のように記述することに。

これで、thisX,thisYの変数に、クリックならクリックした場所の座標、タッチなたタッチした場所の座標が入る。上記では||演算子を使って、クリック座標がなければタッチイベントの座標を取得するようにしています。

以下、動作サンプル。
canvasを使ったお絵描き投稿システム

タッチパネル対応のWindows7における、Chrome32で動作確認しました。
ただ、マルチタッチすると変わった挙動になってしまうよう。例えば、二本の指を縦にして横にスライドすると、下記のような画像になった。
canvas-test
これはこれで面白いけど。

canvasで描いた絵をPHPでサーバー上に保存する方法


canvasを画像データとして取得したい場合は、canvasのDOMオブジェクトにtoDataURLメソッドを使えば簡単に取得できる。
先日紹介した画像保存機能のついてないお絵描きツール、Canvas Painterを開いて適当に絵を描き、F12キーで開発者ツールを開いてコンソール画面で『window.open(document.querySelector(‘canvas’).toDataURL())』とすると描いた画像データが表示されるので、右クリックで保存できる。ちなみに、標準ではPNG画像だけれども、toDataURLの引数を”image/jpeg”とすると、JPEG画像が取得できる(ただし、透過部分は真っ黒になるよう)。

ただ、上記で作成された画像データはBase64のデータ。これをどうやったらPHPを用いて画像ファイルとしてサーバー上に保存できるかが分からなかったので調べてみると、下記サイトに書いてありました。
canvas.toDataURLメソッドを使う | iconDecotter-Log
ただ、base64_decodeという関数でbase64のデータをデコードして、imagecreatefromstringという関数で画像リソース化して、imagepngという関数で画像ファイルとして保存できるよう。PHPはいろんな関数があるなぁ。まだまだ分からないことばかりなのでもっと勉強したほうがよさそう。

ただ、上記をそのままコピペすると、うまくいかなかったので下記のように変更しました。

19行目で透明色を有効にしています。これがないと背景が真っ黒の画像になりました。後、自分の環境ではimagepng関数の第二引数がダブルクォーテーションだとなぜかうまくいかなかったのでシングルクォーテーションに変更。
以下、動作サンプル
canvasを使ったお絵描き投稿システム
お絵描き部分については、ほぼドットインストールの『Canvasでお絵かきアプリ』の6回目までと同じです。
Canvasでお絵かきアプリ (全8回) – プログラミングならドットインストール
今後、お絵かき掲示板を作るとしたら、これを基本にどんどん拡張していこうと思う。

HTML5のCanvasを使ったお絵かきツールまとめ


昔、お絵かき掲示板というものをよく閲覧していたのですが、最近はめっきり見なくなりました。今考えると結構すごい機能があったけど、FlashやJAVAアプレットだからiPadとかでは使えないんだよなぁ。なんて思っているとCanvasでお絵かきアプリ (全8回) – プログラミングならドットインストールというレッスンがあるのを見て、突然HTML5のCanvasで作ったお絵かき掲示板を作ってみたいと思うようになりました。

いや、でもそもそもすでにCanvasで作られたお絵描きツールはあるんじゃないかと思い、調べてみたらすでにいろいろある模様。以下、見つけたもののリスト。

イラストブック – 無料レンタルお絵かき掲示板
今回見つけたもののなかで最もお絵かき掲示板っぽかったもの。普通にChromeで見てみるとかなり高機能なFlashを使ったお絵かきツールになるのですが、ChromeのUserAgentをiPadに変更したらCanvasで作られたお絵かきツールを見ることができました。
Canvas Painter
描画の軌跡を記録できるのが特徴のお絵描きツール。線や四角や円がドラッグしてる最中にも描画できるというのは正直どうやっているのかよく分からない。ただ、投稿どころか画像に変換する機能すらなさそう。また、タッチパネル対応でもない様子。
なお、このサイトは下記記事で見つけました。
ASCII.jp:HTML5のCanvasで作る、Flash不要のお絵かきツール (1/5)|古籏一浩のJavaScriptラボ
rails3 + html5 canvasでお絵かき投稿サイトを作ろう! | KRAY Inc
Drawing
Canvasを使ったお絵かき掲示板を作るのには一番ためになりそうなサイト(Coffee Scriptはよく分からないけど)。投稿された画像をクリックするとCanvasに反映されるよう。ただこれもタッチパネルには対応してなさそう。
WingMemo: HTML5でお絵かきツールを作ってみた
お絵かき
透明度や背景透明の設定が面白い。ブラシの種類も多い。タッチパネルには対応してないよう
Canvasお絵描きアプリ – YoheiM.NET
なんとレイヤー機能つき。Canvasで作られたお絵描きツールをいろいろ探してみたけど、レイヤー機能をもってるのはこれしか見つからなかった。ただ、四角を描く時にドラッグ時に描画されない。タッチパネルには非対応のよう。
JavaScriptで比較的本気でお絵描きアプリを作ってみた | fladdict
JavaScriptで作ったお絵描き掲示板のソースを公開するよ | fladdict
JSPaint runs except IE
すごい高機能。色の選択が本格的。散布ブラシと指先は全くどうやってるのか思いつかない。ズーム機能まである。
オープンソースのHTML5お絵かきウィジェット「Literally Canvas」:phpspot開発日誌
About — Literally Canvas v0.3-rc2 documentation
基本的な機能のみをもったお絵描きウィジェットらしい。タッチパネル対応のよう。文字入力機能がある。上記のphpspotのページを見てみると関連エントリに似たようなエントリへのリンクがあった。
Canvasベースのお絵かきが実装できるjQueryプラグイン「Sketch.js」:phpspot開発日誌
お手軽にお絵かきアプリが作れるjQueryプラグイン「wPaint」:phpspot開発日誌
wPaint.jsがすごいよさそう。塗りつぶし機能もあるし、タッチパネルにも対応してる。

純粋なお絵かき掲示板機能をもったCanvasで作られたお絵描きツールは少なそうですが、canvasで作られたお絵描きツールはいろいろあるようです。
うーん。それにしても、jQueryプラグインがあるのか。実装するとしたら、そのプラグインを使ったうえで足りないところ(投稿機能など)は自分で追加していくという形をとるのが一番簡単かな。
いやでも、勉強用にいろいろやってみようかな。すぐに挫折しそうな気もするけど。

さて、いろいろCanvasで作られたお絵描きツールを見てきたけど、お絵かき掲示板の代表格の『しぃペインター』のほうがまだまだ高機能な印象です(参考:しぃペインターの使い方(しぃペインター講座))。
一部分のコピー機能を実装したCanvasのお絵描きツールというのはないのだろうか。