javascript - 特定のx、y座標で長方形の色を取得します

Question

キャンバス上の特定のx、y座標でピクセルの色を取得できるようにしたい（長方形の色ですが、ピクセルで十分です）。

ライブラリを追加せずに通常のJavaScriptでこれを行う方法はありますか？

私はモバイルプラットフォームのアイデアでそれを開発していて、外部ライブラリを使用したくないです。ありがとう

Answer 1

答えについては、ソースに直接行きましょう。

あなたが欲しいcontext.getImageData(x, y, width, height);

これにより、キャンバスから長方形が取得され、そこにあるすべてのピクセルが「ImageData」オブジェクトの形式で返されます。次に、このオブジェクトには「データ」属性があります。これは、すべての目的と目的で、通常の配列です（そうではありませんが、読み取りたいだけの場合は、そのように見せかけることができます）。

データ配列は次のようになります

[r,g,b,a,r,g,b,a,r,g,b,a,...]ここで、r、g、b、およびaは、1ピクセルの色の赤、緑、青、およびアルファチャネルです。ピクセルは、英語の本で読んでいるかのように並べられています（左から右、次に上から下）。

あなたの目的のために、あなたはただすることができますvar pixel = context.getImageData(x,y,1,1).data。では、赤い部分を知りたいのならpixel[0]、緑ですか？pixel[1]... 等々。

ただし、私の経験的なテストでは、getImageDataは非常にコストのかかる操作であることに注意してください（特にFirefoxでは、Chromeはそれをより高速に処理しますが、境界チェックは少なくなります）。このクエリを1秒間に何度も実行することが予想される場合は、結果をキャッシュするために、より大きな長方形を取得する価値があるかもしれません。もちろん、ピクセルデータが急速に変化している場合、これは機能しません。

Answer 2

CanvasのgetImageData（）は、キャンバス上の指定された長方形のピクセルデータをコピーするImageDataオブジェクトを返します。

var color = canvas2d_context.getImageData(pixel_coord_x, pixel_coord_y, 1, 1);

console.log('pixel red value:   ' + color.data[0]);
console.log('pixel green value: ' + color.data[1]);
console.log('pixel blue value:  ' + color.data[1]);
console.log('pixel alpha value: ' + color.data[1]);

...主にhttp://www.w3schools.com/tags/canvas_getimagedata.aspから