在特定的x，y座標處獲取矩形的顏色

-4

我希望能夠在畫布上獲得特定x，y 座標處的像素的顏色（矩形的顏色，但像素將爲 sufice）。在特定的x，y座標處獲取矩形的顏色

有沒有反正這樣做與普通的JavaScript沒有添加任何額外的庫？

我正在開發它與移動平臺的想法，並不希望使用外部庫。謝謝

來源

2013-02-16 user2078816

-1沒有研究努力 – 2013-02-16 16:48:39

-1你什麼也沒試。你只是想要我們的答案....... – 2013-02-16 17:02:34

要知道答案，讓我們直奔source。

你想context.getImageData(x, y, width, height);

這抓住的一個矩形的畫布，並有返回的所有像素在「ImageData」對象的形式。這個對象又有一個「數據」屬性，對於所有的意圖和目的，它只是一個普通的數組（不是，但你可以假裝它是如果你只是想讀取它）。

的數據陣列看起來像

[r,g,b,a,r,g,b,a,r,g,b,a,...]其中，r，G，B，和a是一個像素的顏色的紅色，綠色，藍色，和alpha通道。這些像素的排列方式好像是在英文書籍中一樣（從左到右，然後從上到下）。

爲了您的目的，您可以只做var pixel = context.getImageData(x,y,1,1).data。那麼如果你想知道紅色的部分，做pixel[0]，綠色？ pixel[1] ...等等。但是，在我的經驗測試中，getImageData是一個令人難以置信的昂貴的操作（特別是在Firefox中; Chrome處理速度更快，但邊界檢查更少）。如果您希望每秒執行多次查詢，則可能需要使用較大的矩形來緩存某些結果。如果像素數據快速變化，這當然不起作用。

來源

2013-02-16 16:54:33

謝謝，這正是我需要的幫助：D – user2078816 2013-02-16 17:29:16

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

來源

2013-02-16 16:49:10

在特定的x，y座標處獲取矩形的顏色

回答

相關問題