html5-canvas
「getImageData」と「putImageData」を使用したピクセル操作

"context.getImageData"の紹介

Html5キャンバスは、キャンバス上の任意のピクセルの色を取得および変更する機能を提供します。

キャンバスのピクセル操作を使用すると、次のことができます。

• 画像のカラーピッカーを作成するか、カラーホイールのカラーを選択します。
• ぼかしやエッジ検出などの複雑な画像フィルタを作成します。
• 画像の任意の部分をピクセルレベルで再描画します（HSLを使用する場合は、重要なライティングと彩度を保持したままイメージの色を変更することもできます。注：キャンバスにはBlend Compositingがあり、場合によってはイメージの色を変更することもできます。
• 画像内の人物/アイテムの周りの背景を「ノックアウト」し、
• 画像の一部を検出して塗りつぶすためのペイントバケットツールを作成します（たとえば、ユーザーがクリックした花びらの色を緑色から黄色に変更します）。
• 画像（例えば、顔認識）を調べる。

よくある問題：

• セキュリティ上の理由から、 getImageDataは、Webページ自体とは別のドメインで作成されたイメージを描画した場合は無効になります。
• getImageDataは、大きなピクセルデータ配列を作成するため、またGPUを使用してその作業を支援するため、比較的高価なメソッドです。注：Canvasには、 getImageDataと同じピクセル操作を行うことができるブレンド合成getImageDataがgetImageDataれました。
• イメージが.pngの場合、キャンバス上にイメージを描画するときにブラウザがガンマ補正とアルファgetImageData許可されているため、 getImageDataは元の.pngファイルとまったく同じ色を報告しないことがあります。

ピクセルの色を取得する

getImageDataを使用して、キャンバスコンテンツのすべてまたは一部のピクセルカラーを取得します。

getImageDataメソッドは、 imageDataオブジェクトを返します。

imageDataオブジェクトには、ピクセルの色情報を含む.dataプロパティがあります。

dataプロパティは、要求されたすべてのピクセルの赤、緑、青およびアルファ（不透明度）のカラーデータを含むUint8ClampedArrayです。

// determine which pixels to fetch (this fetches all pixels on the canvas)
var x=0;
var y=0;
var width=canvas.width;
var height=canvas.height;

// Fetch the imageData object 
var imageData = context.getImageData(x,y,width,height);

// Pull the pixel color data array from the imageData object
var pixelDataArray = imageData.data;

次のように、 data配列内の任意の[x、y]ピクセルの位置を取得できます。

// the data[] array position for pixel [x,y]
var n = y * canvas.width + x;

そして、そのピクセルの赤、緑、青、アルファの値を次のように取得できます：

// the RGBA info for pixel [x,y]
var red=data[n];
var green=data[n+1];
var blue=data[n+2];
var alpha=data[n+3];

ピクセルデータ配列の構造を示す図

context.getImageDataは、小さな2x3ピクセルサイズのキャンバスの場合の下に示されています。