Question

我正在尝试从图像中获取像素数据来计算图像的平均亮度。我使用img.loadPixels();访问数据没有问题，但由于某种原因，像素数组的某些元素是undefined，这会破坏我的计算。

以下是sketch.js的代码：

var img;
var brightness;
var inc;
var gotBright = false;

function preload(){
   img = loadImage('assets/2.png');
}

function setup(){
   createCanvas(500, 500);
   background(0);

}

function draw(){

   img.resize(10, 10);
   image(img, 0, 0, img.width, img.height);

   brightness = 0;
   inc = 0;

   if (gotBright == false) {

      img.loadPixels();
      loadPixels();
      for (var i = 0; i < img.width; i++) {
         for (var j = 0; j < img.height; j++) {
            var index = (i * j * img.width) * 4;
            var r = img.pixels[index + 0];
            var g = img.pixels[index + 1];
            var b = img.pixels[index + 2];

            brightness += (r + g + b) / 3;
            inc ++;
            console.log(inc, r , g, b);
         }
      }
      gotBright = true;
      brightness = brightness/inc;
   }
}

brightness应该等于0到255之间的某个数字，但现在它是NaN ...

如果你有关于计算图像平均亮度的其他方法的建议，我很高兴听到它们:) 谢谢！

Answer 1

我认为您的指数计算错误。不应该是：

var index = (i + j * img.width) * 4;

Answer 2

Bauer's answer走在正确的轨道上。您需要确保像素索引正确。最好的方法是拿出一张方格纸并绘制一些例子。

或者您可以使用带有The range of char is U+0000 to U+ffff和get()参数的x函数。来自the reference：

使用p5.js获取像素亮度

2 个答案: