html - 指定された色のx、y位置を取得するImageDataオブジェクト

Question

ImageDataオブジェクトを使用して、「黒」であるhtml5キャンバス上のx、yピクセルの位置を取得することは可能ですか？私はキャンバスにかなり慣れていないので、これが可能かどうか、またはそれを実装する方法を理解するのに苦労しています。

Answer 1

確かにあなたはそれを行うことができます。

キャンバス コンテキストをgetImageData処理し、RGBA チャネルを表す 4 のブロックでループしてから、各チャネルを個別に比較する必要があります。

複数のピクセルの ImageData は少し注意が必要です。イメージングvar imgData = ctx.getImageData(0, 0, width, height);:

これimgData.dataは、次の形式の大きな配列です。

imgData.data[0] // is the Red channel of the first pixel
imgData.data[1] // is the Green channel of the first pixel
imgData.data[2] // is the Blue channel of the first pixel
imgData.data[3] // is the Alpha (transparency) channel of the first pixel

imgData.data[4] // is the Red channel of the second pixel
... etc ...

http://jsfiddle.net/GXrd5/を尋ねたデモを確認してください