HTML5/canvas上に読み込んだ画像を貼り付ける

ここからしばらく、HTML5のcanvasについて書こうと思います。
canvasは、何やら新しいもののように思えますが、実際に操作する時に働くのはjavascriptなので、描画に関するルールや関数を覚えてしまえば、あとはスクリプトが書けるかどうかのお話です。

Canvas – HTML5.JP

基礎的な部分については、他の解説サイトやリファレンスをお読みください。ここではiconDecotterで実装する時にやったことに絞って、メモ的にまとめます。ちなみに、ブラウザはcanvasに対応していることを前提としますので、主にIE8以下等については考慮しません。

そもそも何故canvasを使うのか
canvasを作る
javascriptで画像を読み込む
canvasに貼り付ける

そもそも何故canvasを使うのか

実際のところ、Web上の効果表現のみであれば、向き不向きは多少あるものの、jQueryなどのエフェクトを使ったアニメーションで代用が効きます。canvasが活かせるのは、ゲームやドローツール等のインタラクティブな入力があるもの、canvas上のデータを画像として送信したりする必要がある時です。

iconDecotterは最後にTwitterAPIに画像を送信しますが、アイコンの加工を表現したcanvasのデータをそのまま投げることで、画像処理を全てクライアントサイドに任せることが出来ています。

canvasを作る

HTMLの<canvas>タグを、widthとheightを指定して書けば、そこがcanvasになります。idも指定しておくとやりやすいです。HTML上はそれだけでOKです。

<canvas id="c1" width="300" height="300"></canvas>

あとは、javascriptでcanvasを使うための下準備として、2Dコンテキストのオブジェクトを作ります。

var canvas = document.getElementById('c1');　//canvas(c1)のノードオブジェクト
var ctx = canvas.getContext('2d');  //2Dコンテキストをctxに格納

描画したいcanvasのノードオブジェクトを取得し、getContextメソッドで2Dコンテキストを任意のオブジェクトに格納します。この2Dコンテキストオブジェクトで様々なメソッドを使用し、canvasに線や図形を描いたり、色を変えたりなどのことを指示出来るのです。

補足ですが、このcanvasはCSSでスタイルを指定することも出来ます。
ただし、CSSでの指定はcanvasのデータとは無関係になりますので、例えばborderプロパティで外枠を付けても、canvasのデータ上で外枠が付いたりはしません。
また、canvasのサイズについても、canvasタグの属性として指定されているサイズがデータ上の画像サイズとなりますので、CSSでwidthやheightを調整しても、canvasデータに影響しません。動的にcanvasのサイズを変更したい場合は、DOMアクセスでcanvasのwidth属性とheight属性を変更する必要があります。

javascriptで画像を読み込む

canvasに画像を貼り付けるためには、そのための画像を一旦javascriptのオブジェクトにする必要があります。以下のようにすると、画像をjavascriptで読み込むことができます。

var img = new Image();    //新規画像オブジェクト
img.src = "./sample_image.png";   //読み込みたい画像のパス

Image()でオブジェクトを作成し、srcプロパティに画像のパスを代入するだけでOKです。

canvasに貼り付ける

画像が読み込めたら、それをcanvasに貼り付けます。画像を貼り付けるには、drawImageメソッドを使います。

drawImage() メソッド – Canvasリファレンス – HTML5.JP

引数の指定の仕方が3パターンあり、詳細に指定すれば拡大縮小やトリミングしながらの貼り付けが可能です。

context.drawImage(image, dx, dy)
//image:画像オブジェクト　dx:貼り付け位置のx座標　dy:貼り付け位置のy座標
//座標は基本的に左上が始点(0,0)です。
context.drawImage(image, dx, dy, dw, dh)
//dw:貼り付け時の画像の横幅　dh:貼り付け時の画像の縦幅
//この2つの指定がない場合は、元画像のそのままの縦横（1倍）で貼り付けられます。
context.drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh)
//sx,sy,sw,shは、貼り付ける前の元画像をトリミングするためのパラメータです
//sx:元画像のトリミング始点のx座標　sy:元画像のトリミング始点のy座標
//sw:元画像のsxから横にswの位置までをトリミング
//sh:元画像のsyから縦にshの位置までをトリミング

単純にそのまま画像を貼り付けるだけであれば、dxとdyの指定だけでOKです。

実例として、この画像をcanvasで読み込んで貼り付けるスクリプトのサンプルを作りました。

サンプル画像

表示上は同じ画像が出ているだけですが、javascriptで読み込み、canvas上に貼り付けています。ちなみに、javascriptで読み込み中にdrawImageメソッドが実行されてしまうと貼り付けられませんので、onloadを利用して、ちゃんと読み込まれた後にdrawImageが実行されるようにしています。