読み込んだ画像の一部を切り貼りする(getImageData・putImageData) [html5 の Canvas を使ってみる：第卅回]

drawImage(); で読み込んだ画像の一部を読み込み、別の場所に貼り付けるということを、getImageData と putImageData を使ってやってみる。
判りやすいかどうか不明だけど、一度画像全体を読み込んで表示し、その上に白い透明の矩形でかぶせ、さらに上に切り取った画像を載せて、切り取った部分だけ白くならないような画像にしてみる。

★html 側

<canvas id="getImageData"></canvas>

★Javascript 側

onload = function() {
// 画面ロード時に描画を実行
  draw();
};
function draw() {
// id: getImageData で 2 次元描画を行うことの定義
  var c = document.getElementById("getImageData").getContext('2d');

// drawImage(); で画像を読み込む
  var target = new Image();
  target.src = "DasEnde.jpg?" + new Date().getTime();
  target.onload = function() {
    c.drawImage(target, 30, 30);
// 画像を x:35、y:35 から 50px の正方形分だけ
// 変数 img に格納
// この第 1・2 引数はあくまでも基点からの座標で、
// 画像の左上端からの座標ではない
    var img = c.getImageData(35, 35, 50, 50);
// rect(); で画像にかぶるように矩形を描画
    c.rect(30, 30, 100, 100);
// fillStyle で白い透明を矩形に塗る
    c.fillStyle = "rgba(255, 255, 255, .85)";
    c.fill();
// 基点から x:35、y:35 の座標に上記で格納した img を配置
    c.putImageData(img, 35, 35);
  }
}

すると、こうなる。

ちなみに、上記の例で白い矩形を載せたあとに getImageData(); を記述すると、白い矩形まで一緒に格納してしまうので、こういう使い方をしたい場合は注意しないと。。。

確認環境：
Safari 5.0、Chrome 5.0.375.70、Firefox 3.6.3、Opera 10.53

W3C；
4.8.11 The canvas element — HTML 5