P5.js

Question

我想检测图像或“绘制”区域的角点（左上角和右下角）。为此，我想使用 javascript 库 p5.js。 findTop() 和 findBottom() 这两个函数应该可以识别角点。

起点是一只猫的素描（图1）。最后要识别图中的两个角点（见图2）

figure 1 - cat

figure 2 - Detect Corners

过程如下：用两个For循环图像数组（这里是pixels[]）运行通过。对于每个像素，应该检查内容是否为黑色，如果是，则比较它是否是最小的 x 和 y 值 (x1|y1)。为了控制，相应的像素对是粉红色的。第二个 findBottom() 函数的工作方式类似。不幸的是我找不到正确的坐标，但我不知道我做错了什么...

任何帮助将不胜感激:-)

let img;
let x1, y1;
let x2, y2;

let wid = 720;
let hei = 400;

function setup() {
  createCanvas(wid, hei);
  img = loadImage('cat.jpg'); 
  pixelDensity(1);
}


function draw() {
  image(img, 0, 0);
  loadPixels();
  findTop();
  findBottom();
  ColorizePixel(x1,y1);
  ColorizePixel(x2,y2);
  updatePixels();
}

function findTop() {
  x1=wid;
  y1=hei;
      
      for(let y=0; y<width; y++) {
        for(let x=0; x<height; x++) {
       
          let index = (x + y * width) * 4;

          if(pixels[index] < 255 && x < x1){
            x1 = x;
          }
                    
          if(pixels[index] < 255 && y < y1){
          y1 = y;
          }
  }
}
}

function findBottom() {
  x2=0;
  y2=0;
      
      for(let y=0; y<width; y++) {
        for(let x=0; x<height; x++) {
       
          let index = (x + y * width) * 4;
          
          if(pixels[index] < 255 && x > x2){
            x2 = x;
          }
                    
          if(pixels[index] < 255 && y > y2){
            y2 = y;
          }      
  } 
}
}

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

Result of running that code

编辑#2

let img;
let x1, y1,x2, y2;

let newImage;

let wid = 720;
let hei = 400;

function setup() {
  createCanvas(wid, hei);
  img = loadImage('cat.jpg'); // Load the image
  pixelDensity(1);
}


function draw() {
  image(img, 0, 0);
  loadPixels();
  findTop();
  findBottom();
  ColorizePixel(x1,y1);
  ColorizePixel(x2 ,y2);
  updatePixels();
  
}


function findTop() {
  
  x1=720;
  y1=400;
      
      for(let y=0; y<height; y++) {
        for(let x=0; x<width; x++) {
       
          let index = (x + y * width) * 4;
          
          if(pixels[index] < 122 && x < x1){
            x1 = x;
          }
          
          if(pixels[index] < 122 && y < y1){
          y1 = y;
          }
  }
}
}


function findBottom() {
  x2=0;
  y2=0;
      
      for(let y=0; y<height; y++) {
        for(let x=0; x<width; x++) {
       
          let index = (x + y * width) * 4;
          
          if(pixels[index] < 122 && x > x2){
            x2 = x;
          }
                    
          if(pixels[index] < 122 && y > y2){
            y2 = y;
          }      
  } 
}
}

//Farebe Pixel Pink ein
function ColorizePixel(x,y){
  let chosenPixel = (y * width + x) * 4;
  pixels[chosenPixel]=255;
  pixels[chosenPixel+1]=0;
  pixels[chosenPixel+2]=255;
  pixels[chosenPixel+3]=255;
}

Result of running that code #2

Answer 1

在绘制图像和检测角之前，您需要用白色不透明颜色填充背景：

function draw() {
  background(255, 255, 255);
  image(img, 0, 0);

  // [...]
}

Answer 2

我看到两个问题。

循环

你的循环运行 y 到 width 而不是高度，x 到 height 而不是宽度。我没有早点发现。

JPEG

您正在处理 JPEG 文件。这意味着有损压缩。

单调的颜色不会保持单调。

不要期望白色准确地 255.

选择一个不太严格的阈值，否则您可能会“捕获”整个 jpeg 块，而不仅仅是非白色像素，因为如果压缩足够严格，一个块包含一些不同的像素会导致它们全部变形。

P5.js - 检测图像中的角点 (JPG)

P5.js - Detect corner points within an image (JPG)

javascript

processing

image-processing

循环

JPEG