從畫布獲取像素顏色

Question

我發現了很多示例，這些示例說明了如何在圖像的特定點上獲得像素的顏色。 基本上所有這些看起來都相似。 例如：

canvas = document.getElementById('something'); 
context = canvas.getContext('2d'); 
var pixel = context.getImageData(x, y, 1, 1).data;
console.log(pixel[0] + ' ' + pixel[1] + ' ' + pixel[2]);

但是，當我執行上面顯示的代碼時，無論圖像的實際顏色是什么，它總是給我相同的結果：“ 0 0 0 0”或“ 0 0 0 255”。 我嘗試了不同的顏色，並且輸出始終相同。 有人可以解釋一下為什么會這樣嗎？ 為什么只有alpha值在變化？ （為什么總是總是0或255）也許我應該以某種方式投射結果，或者我沒有正確地獲取它們？

Answer 1

您已在注釋中鏈接的示例jsbin正常運行（除了e.pageX應該是e.pageY ，但這並沒有改變結果），這里的問題是實際的預期結果。

用黑色繪制的位置為0 0 0 255 （即不透明的黑色）。 在未繪制（因此為紅色）的地方，您將獲得0 0 0 0 ，它是“默認值（0）”和透明的 ，這就是為什么看到背景紅色透出的原因。 沒有什么實際上是在這一點上，畫布上 -它是透明的。

這是一個更新的示例，其中畫布分為4個。前3列顯示不同的輸出，而最后3列是0 0 0 0因為此時未繪制畫布-背景顏色不是圖像的一部分畫布的數據 。

 var canvas = document.getElementById("myCanvas"); var ctx = canvas.getContext("2d"); ctx.fillStyle = "black"; ctx.fillRect(0, 0, 75, 150); ctx.fillStyle = "blue"; ctx.fillRect(75, 0, 75, 150); ctx.fillStyle = "yellow"; ctx.fillRect(150, 0, 75, 150); function echoColor(e){ var imgData = ctx.getImageData(e.pageX, e.pageY, 1, 1); red = imgData.data[0]; green = imgData.data[1]; blue = imgData.data[2]; alpha = imgData.data[3]; console.log(red + " " + green + " " + blue + " " + alpha); } 

 <canvas id="myCanvas" width="300" height="150" style="background:red;" onclick="echoColor(event)"> </canvas>