画像を操作するには？
解説
画像データを直接操作したり、他のCanvasにコピーしたりするために次のメソッドが用意されています。
// 幅がsw、高さがshのImageDataオブジェクトを作成する
imagedata = context.createImageData(sw,sh);
// imgdataと同じ幅、高さのImageDataオブジェクトを作成する
imagedata = context.createImageData(imgdata);
- Canvasから取得した画像で、ImageDataオブジェクトを生成する
// Canvasの左上を(sx,sy)とし、幅がsw、高さがshの領域からImageDataオブジェクトを生成する
imagedata = context.getImageData(sx,sy,sw,sh);
- CanvasにImageDataオブジェクトの内容を描画する
// (dx,dy)の位置にImageDataオブジェクトの内容を描画する
// dirtyX,dirtyY,dirtyWidth,dirtyHeightが指定された場合は、その範囲内のみ描画対象とする
context.putImageData(imagedata,dx,dy [,dirtyX,dirtyY,dirtyWidth,dirtyHeight]);
ImageDataオブジェクトのプロパティのうち、width、heightは幅と高さを参照するために使います。
dataプロパティは、画像のビットマップデータを表します。これは、各ピクセルの色がRGBAの順で並ぶ一次元配列であり、先頭が左上、末尾が右下の色を表します。この内容を変更することで画像を直接加工することができます。
次の例は、画像の一部分を別の場所にコピーするサンプルです。
var img1 = document.getElementById("bird");
context.drawImage(img1, 10,10);
var imgdata = context.getImageData(10,10,40,40);
context.putImageData(imgdata,80,10);
HTML側のコード：
<img src="bird.jpg" id="bird">
bird.jpg:
【クリッピング】
あらかじめパスを設定し、clip()メソッドを実行することで、画像や図形をくり抜くことができます。
次の例は、画像を円形にくり抜いています。
context.beginPath();
context.arc(110,75,70,0,Math.PI*2,false);
context.clip();
var img1 = document.getElementById("700");
context.drawImage(img1,0,0);
HTML側のコード：
<img src="700.jpg" id="700">
700.jpg:
関連項目
Canvasとは
画像を表示するには？
