キャンバスの魔法の使い方

Canvas には getImageData という魔法のメソッドがあります。キャンバス内の画像の各ピクセルのカラー値を取得し、変更することができます。

さまざまなフィルターアルゴリズムがある場合。次に、キャンバスを使用して写真のフィルター変換を実現し、Meitu Xiuxiu と同様の機能を作成できます。

使用方法:

1: まず、画像をキャンバスにインポートします。

2: var CanvasData = context.getImageData(0, 0, Canvas.width, Canvas.height); //これを使用して画像の各ピクセルの情報を取得し、配列を取得します。取得される情報は [[r,g,b,a],[r,g,b,a]] のような 2 次元配列ではなく、[r,g,b,a,r,g,b, a] rgba 順に配置された単一の配列。

3: このステップでは、各ピクセルの rgba の変更を開始します。ここでは、グレースケール効果のアルゴリズムと実装手順を簡単に紹介します。

function gray(canvasData)
{
for ( var x = 0; x < canvasData.width; x++) {
  for ( var y = 0; y < canvasData.height; y++) {
  // Index of the pixel in the array
  var idx = (x + y * canvasData.width) * 4;
  var r = canvasData.data[idx + 0];
  var g = canvasData.data[idx + 1];
  var b = canvasData.data[idx + 2];
  var gray = .299 * r + .587 * g + .114 * b;
  // assign gray scale value
  canvasData.data[idx + 0] = gray; // Red channel
  canvasData.data[idx + 1] = gray; // Green channel
  canvasData.data[idx + 2] = gray; // Blue channel
  canvasData.data[idx + 3] = 255; // Alpha channel
  // add black border
  if(x < 8 || y < 8 || x > (canvasData.width - 8) || y > (canvasData.height - 8)) 
  {
   canvasData.data[idx + 0] = 0;
   canvasData.data[idx + 1] = 0;
   canvasData.data[idx + 2] = 0;
  }
  }
}
return canvasData;
}

4: context.putImageData(canvasData, 0, 0); //ピクセルカラー値を処理した後、この文でキャンバスを再描画することを忘れないでください

これらのコードは、画像を白黒効果に変換するコードです。具体的には、達成できる効果の数は、フィルター アルゴリズムの数によって異なります。

以上がこの記事の内容です。この記事の内容が皆さんの勉強や仕事に少しでもお役に立てれば幸いです。また、PHP中国語ウェブサイトも応援したいと思っています。

キャンバスの魔法の使い方に関連するその他の記事については、PHP 中国語 Web サイトに注目してください。