2012/02/02更新

[HTML5] Canvasに画像を読み込み、そして・・・

今日はCanvasに画像を読み込む処理を試してみましたのでブログにその内容を記載したいと思います。

またCanvasのピクセル処理の方法もJavaScriptで公開公開しました。

http://www.yoheim.net/labo/html5/canvas/loadImage.html

画像を読み込む

Canvasに画像を読み込むのはとっても簡単にできました。また画像を読み込むだけでなく、画像をトリムする、画像に陰をつける、画像を傾ける、画像を変形させるといった加工もすることができます。各処理用のメソッドが準備されていました。

Canvasの画像読み込み機能の利用アイデア

Canvasの画像読み込みは、ただ単に画像を読み込むだけではもったいない（というか、それならImageタグで事足ります）。画像を描画して変形させたり、トリムしたり、拡大縮小したり、画像のRGBデータを扱ったりと、画像加工をすることができます。写真の修整、JPEGだけど透過した画像(=Canvas)として利用する、画像にお絵描きする、などアイデアが膨らみます。

ソースを一部掲載

個人的に気に入っている「画像に水面の反射を」のソースコードを掲載したいと思います。他のも気になりましたら、右クリック→ソースを確認にて、見てみてください。

(HTML)

<canvas id="canvas3" width="250px" height="250px"></canvas>

(JavaScript)

var image = new Image();
image.src = "image001.jpg?" + new Date().getTime();
image.onload = function () {
  var canvas = document.getElementById("canvas3");
  var context = canvas.getContext("2d");
  context.drawImage(image, 0, 40, 250, 150, 0, 0, 250, 150);

  // 画像の下50px分を陰に利用する。
  // そこのピクセルデータを取得して、画像の下５０pxに反映する。
  var shadow = context.createImageData(250, 50);
  shadowIndex = 0;
  for (var i = 50; 0 < i; i--) { // 下の行から読み出す
    for (var j = 0; j < (250 * 1); j++) {
      var pxdata = context.getImageData(0, (99+i), 250, 1);
      shadow.data[shadowIndex*4] = Math.floor(pxdata.data[j*4] / 2); // red
      shadow.data[shadowIndex*4+1] = Math.floor(pxdata.data[j*4+1] / 2); // green
      shadow.data[shadowIndex*4+2] = Math.floor(pxdata.data[j*4+2] / 2); // blue
      shadow.data[shadowIndex*4+3] = 255; // opacity
      shadowIndex++;
    }
  }
  // set shadow image.
  context.putImageData(shadow, 0, 150);
}

最後に

Canvasの様々な機能を試してきましたが、本当に面白い。グラフィックについて簡単に様々な事が実現できるから。CanvasはHTML5の目玉の1つですね。HTML上でのグラフィック表現の可能性が広がる一品だと思います。

最後に、HTML5を学ぶFacebookページもご興味ありましたらご覧頂けると幸いです。宜しくお願いします。