基于P5.js的JPG图像角落点（左上、右下）检测问题求助

我来帮你排查代码里的问题，让你能正确找到绘制区域的左上和右下坐标：

主要问题分析 #

• 图像异步加载的问题：
  loadImage是异步操作，你直接在draw里处理像素时，可能图像还没完全加载完成，导致pixels数组数据异常。这是很多P5.js新手容易踩的坑。

• 循环变量的混淆（已在Edit #2中修正，但再强调下）：
  最初版本里你写了for(let y=0; y<width; y++)，y轴的循环范围应该是height而不是width，这个错误会导致你遍历的像素范围不对，自然找不到正确的坐标。

• 深色像素的判断逻辑单一：
  你只判断了红色通道pixels[index] < 122，但如果是彩色图像，有些深色区域的红色通道可能并不低（比如深青色），应该综合判断像素的亮度或者三个通道的整体值，这样识别更准确。

• draw函数重复执行导致的冗余操作：
  draw函数默认会每秒执行60次，你的代码每次都会重新计算坐标并染色，不仅没必要，还可能导致性能问题，甚至视觉上的闪烁。

修正后的完整代码 #

let img;
let x1, y1, x2, y2;
let wid = 720;
let hei = 400;

// 用preload确保图像加载完成后再执行后续代码
function preload() {
  img = loadImage('cat.jpg');
}

function setup() {
  createCanvas(wid, hei);
  pixelDensity(1);
  
  // 只执行一次识别和染色操作，避免重复执行
  image(img, 0, 0);
  loadPixels();
  findTop();
  findBottom();
  ColorizePixel(x1, y1);
  ColorizePixel(x2, y2);
  updatePixels();
}

// 不需要draw函数重复执行，空函数即可
function draw() {}

function findTop() {
  // 初始化x1为图像宽度（最大可能的x值），y1为图像高度（最大可能的y值）
  x1 = img.width;
  y1 = img.height;
  
  for(let y = 0; y < img.height; y++) {
    for(let x = 0; x < img.width; x++) {
      let index = (x + y * width) * 4;
      // 计算像素的亮度，判断是否为深色（亮度阈值可根据实际调整）
      let r = pixels[index];
      let g = pixels[index + 1];
      let b = pixels[index + 2];
      let brightness = (r + g + b) / 3;
      
      if(brightness < 100) {
        if(x < x1) x1 = x;
        if(y < y1) y1 = y;
      }
    }
  }
}

function findBottom() {
  // 初始化x2,y2为0（最小可能的坐标值）
  x2 = 0;
  y2 = 0;
  
  for(let y = 0; y < img.height; y++) {
    for(let x = 0; x < img.width; x++) {
      let index = (x + y * width) * 4;
      let r = pixels[index];
      let g = pixels[index + 1];
      let b = pixels[index + 2];
      let brightness = (r + g + b) / 3;
      
      if(brightness < 100) {
        if(x > x2) x2 = x;
        if(y > y2) y2 = y;
      }
    }
  }
}

function ColorizePixel(x, y){
  let chosenPixel = (y * width + x) * 4;
  pixels[chosenPixel] = 255;     // R
  pixels[chosenPixel + 1] = 0;   // G
  pixels[chosenPixel + 2] = 255; // B
  pixels[chosenPixel + 3] = 255; // A
}

关键修改说明 #

• 使用preload加载图像：确保图像完全加载后再处理像素，避免数据异常。
• 将处理逻辑移到setup：只执行一次识别和染色，避免draw循环的冗余操作。
• 基于亮度判断深色像素：通过RGB三通道的平均值计算亮度，比单一通道判断更准确，能适配更多颜色的深色区域。
• 用图像的实际尺寸遍历：改用img.width和img.height，如果后续图像尺寸和画布不一致，代码也能正常工作。

你可以根据实际的猫咪草图调整亮度阈值（比如把100改成更适合的数值），这样就能精准识别出绘制区域的角落点啦。

内容的提问来源于stack exchange，提问作者MasterKneater