javascript - 无法获取 Canvas 中像素的颜色

Question

Canvas 分为两部分。左边部分是黑色，右边部分是白色。我正在使用以下代码在特定行中查找白色像素，但它没有向控制台记录任何内容。

这是我将 Canvas 的左半边变黑的代码。

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); .

看看这个 fiddle :

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