画像処理のために HTML キャンバス内のピクセル データにアクセスして操作するにはどうすればよいですか?

HTML Canvas からピクセル データを読み取る

HTML Canvas をクエリして特定の座標の色情報を取得することは、画像処理とピクセルの貴重な手法です。操作。 W3C ドキュメントには、ピクセル操作に関する包括的なセクションが用意されており、開発者がピクセル データを取得および変更する手段を提供します。

この概念を説明するために、次の例を考えてみましょう:

反転ピクセル操作を使用した画像

getImageData() メソッドを使用すると、目的の座標と寸法から CanvasPixelArray を取得できます。この配列には、選択した領域内の各ピクセルのカラー コンポーネント データが含まれています。

<code class="javascript">var context = document.getElementById('myCanvas').getContext('2d');

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

// Iterate through each pixel, inverting the color components.
for (var i = 0, n = pix.length; i < n; i += 4) {
    pix[i  ] = 255 - pix[i  ]; // Red
    pix[i+1] = 255 - pix[i+1]; // Green
    pix[i+2] = 255 - pix[i+2]; // Blue
    // i+3 is alpha (the fourth element)
}

// Update the Canvas with the modified ImageData.
context.putImageData(imgd, x, y);</code>

ピクセル操作技術を活用することで、色の反転、画像ブレンドなどのさまざまな画像処理操作を実行できます。 、グラフィカル アプリケーション用の多用途ツールを開発者に提供します。

以上が画像処理のために HTML キャンバス内のピクセル データにアクセスして操作するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。