無法獲取畫布中像素的顏色

Question

畫布分為兩部分。 左側為黑色，右側為白色。 我正在使用以下代碼來查找特定行中的白色像素，但它不會向控制台記錄任何內容。

這是我的代碼，用於將畫布的左半部分變黑。

ctx.beginPath();
ctx.rect(0, 0, cw/2, ch);
ctx.fillStyle = 'black';
ctx.fill();

這是我用來獲取像素數據的代碼：

var imgd = ctx.getImageData(0, 300, 600, 2);
var pix = imgd.data;
var white_count = 0;
for (var i = 0, n = pix.length; i < n; i += 4) {
    var red = pix[i]; // red
    var green = pix[i+1]; // green
    var blue = pix[i+2]; // blue
    console.log(red);
    if(red == 255 && green == 255 && blue == 255) {
        white_count += 1;
    }
}

至少有幾個紅色值應該為255，但全為0。為什么會這樣呢？ 這是我的JSFiddle： https ://jsfiddle.net/83Lb96vp/

Answer 1

我認為您在執行getImageData維度錯誤。

它必須是ctx.getImageData（sx，sy，sw，sh）; 。

看看這個小提琴：

 console.clear(); var c = document.getElementById('c'); var ctx = c.getContext('2d'); var sizeMod = 4; // one "sqare" is "sizeMod" * "sizeMod". c.width = 10 * sizeMod; c.height = 10 * sizeMod; for (var x = 0; x < sizeMod; x++) { for (var y = 0; y < sizeMod; y++) { var color = (Math.abs(Math.round(1 + (Math.random() * 3)) * 4 - 1)).toString('16'); color = '#' + color + color + color + color + color + color; ctx.fillStyle = color; ctx.fillRect(x * sizeMod, y * sizeMod, sizeMod, sizeMod); } } var imgd = ctx.getImageData(0, 0, 10 * sizeMod, 10 * sizeMod); var pix = imgd.data; var white_count = 0; for (var p = 0; p < pix.length; p += 4) { var c = { r: pix[p + 0], g: pix[p + 1], b: pix[p + 2], a: pix[p + 3], hex: '#' + pix[p + 0].toString('16') + '' + pix[p + 1].toString('16') + '' + pix[p + 2].toString('16') } if (c.hex == '#ffffff') { white_count++; } } console.log(white_count + "\\nis white\\none tile is", (sizeMod * sizeMod), "big so", white_count / (sizeMod * sizeMod), "tiles") 

 <canvas id="c" width="10" height="10" style="min-width: 100%; min-height: 100%;"> 

的jsfiddle