HTML Canvas のピクセル データへのアクセス

HTML Canvas オブジェクト内の特定のピクセルの色を取得することは可能ですか?はい、Canvas API が提供するさまざまなメソッドを使用して、HTML Canvas のピクセル データにアクセスして操作できます。

ピクセル カラーの取得

ピクセルの色を取得するには、次の手順に従います。キャンバス内の特定の場所では、getImageData() メソッドを使用できます。このメソッドは、キャンバスの一部を表す ImageData オブジェクトを返します。 ImageData オブジェクトには、.data プロパティを使用してアクセスできるピクセル データの配列が含まれています。

ピクセル操作

ピクセル データを取得したら、操作できます。それは望みどおりです。たとえば、各ピクセルをグレーの階調に変換することで、グレースケール イメージを作成できます。

// Get the CanvasPixelArray from the given coordinates and dimensions.
var imgd = context.getImageData(x, y, width, height);
var pix = imgd.data;

// Loop over each pixel and convert it to grayscale.
for (var i = 0, n = pix.length; i < n; i  = 4) {
  var gray = (pix[i]   pix[i 1]   pix[i 2]) / 3;
  pix[i  ] = gray;
  pix[i 1] = gray;
  pix[i 2] = gray;
}

// Draw the ImageData at the given (x,y) coordinates.
context.putImageData(imgd, x, y);

getImageData() メソッドと putImageData() メソッドを利用すると、画像のフィルタリング、色調整、HTML 上での効果の作成など、さまざまなピクセル操作タスクを実行できます。キャンバス。