无法读取未定义的属性（读取 'width'）- 图像处理 p5.js

Question

我的代码旨在并排显示同一图像，其中左侧图像是原始图像，右侧图像具有滤镜。我可以看到过滤器有效，但更改后的图像在顶部 canvas 的宽度上重复显示。

我也收到错误 "Cannot read properties of undefined (reading 'width')" for line 'image(Filter(img), img.width, 0);'。

我假设 Filter 函数有问题，参数调用不正确，但我不确定。

var img;

function preload() {
  img = loadImage("https://www.paulwheeler.us/files/no_idea_why.jpg");
}

function setup() {
  createCanvas((img.width * 2), img.height);
}

function draw() {
  background(125);
  image(imgIn, 0, 0);
  image(Filter(img), img.width, 0);
  noLoop();
}

function mousePressed() {
  loop();
}

function Filter(update) {
  var resultImg = createImage(img.width, img.height);
  resultImg = sepiaFilter(update);
  return resultImg;
}

function sepiaFilter(input) {
  loadPixels();
  input.loadPixels();

  for (var x = 0; x < input.width; x++) {
    for (var y = 0; y < input.height; y++) {
      var index = (y * input.width + x) * 4;

      var r = input.pixels[index + 0];
      var g = input.pixels[index + 1];
      var b = input.pixels[index + 2];

      var newRed = (r * 0.4) + (g * 0.8) + (b * 0.2)
      var newGreen = (r * 0.3) + (g * 0.7) + (b * 0.2)
      var newBlue = (r * 0.3) + (g * 0.5) + (b * 0.1)

      pixels[index + 0] = newRed;
      pixels[index + 1] = newGreen;
      pixels[index + 2] = newBlue;
      pixels[index + 3] = 255;
    }
  }
  updatePixels();

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.1/p5.js"></script>

Answer 1

问题是 sepiaFilter 函数没有 return 值。因此，当您调用 image(earlyBirdFilter(imgIn), imgIn.width, 0); 时，您实际上是在调用 image(undefined, imgIn.width, 0);，这会导致错误。

无法读取未定义的属性（读取 'width'）- 图像处理 p5.js

Cannot read properties of undefined (reading 'width') - image processing p5.js

javascript

image-processing

p5.js