从网络摄像头选择区域到屏幕截图并在 p5js 中捕获不起作用

Question

我想在按下“添加屏幕截图”按钮时从相机的选定区域截取屏幕截图，但除了空白 canvas 之外什么也没有出现，另外另一个“添加捕获”按钮将添加另一个 canvas 以在我按下它时继续捕获相机的选定区域，但除了空白 canvas 之外什么也没有出现。我想知道当我按下按钮时到底发生了什么？ link to the script in p5js editor

let video;
let shots = [];
let captures = [];
let button1;
let button2;
let canvas1, canvas2;
let lastmouseX = 0, lastmouseY = 0;
let firstmouseX = 0, firstmouseY = 0;

const s1 = p => {
  p.setup = () => {
    console.log("asd");
    // video
    video = p.createCapture(p.VIDEO);
    video.hide();
    // canvas
    canvas1 = p.createCanvas(700, 500);
    canvas2 = p.createGraphics(700, 500);
    // button1
    button1 = p.createButton("Add screenshot");
    button1.size(200, 100);
    button1.mousePressed(() => {
      shots.push(new p5(s2, "screenshotbox"));
    });
    // button2
    button2 = p.createButton("Add Capture");
    button2.size(200, 100);
    button2.mousePressed(() => {
      captures.push(new p5(s3, "capturebox"));
    });
  };
  p.draw = () => {
    canvas2.clear();
    p.image(video.get(), 0, 0, 700, 500);
    canvas2.fill(175, 100);
    canvas2.rect(firstmouseX, firstmouseY, lastmouseX-firstmouseX, lastmouseY-firstmouseY);
    if (p.mouseIsPressed) {
      canvas2.clear();
      if (!(p.mouseX > 710 || p.mouseX < -10 || p.mouseY < -10 || p.mouseY > 510)) {
        canvas2.rect(firstmouseX, firstmouseY, p.mouseX-firstmouseX, p.mouseY-firstmouseY);
      }
      else {
        canvas2.rect(firstmouseX, firstmouseY, lastmouseX-firstmouseX, lastmouseY-firstmouseY);
      }
    }
    p.image(canvas2, 0, 0);
  };
  p.mousePressed = () => {
      if (!(p.mouseX > 710 || p.mouseX < -10 || p.mouseY < -10 || p.mouseY > 510)) {
        (p.mouseX > 700) ?
          firstmouseX = 700 :
          (p.mouseX < 0) ?
            firstmouseX = 0 :  
            firstmouseX = p.mouseX;
        (p.mouseY > 500) ?
          firstmouseY = 500 :
          (p.mouseY < 0) ?
            firstmouseY = 0 :  
            firstmouseY = p.mouseY;
      }
      // console.log("r", p.mouseX, p.mouseY);
      // console.log("nr", firstmouseX, firstmouseY);
    };
    p.mouseReleased = () => {
      if (!(p.mouseX > 710 || p.mouseX < -10 || p.mouseY < -10 || p.mouseY > 510)) {
        (p.mouseX > 700) ?
          lastmouseX = 700 :
          (p.mouseX < 0) ?
            lastmouseX = 0 :  
            lastmouseX = p.mouseX;
        (p.mouseY > 500) ?
          lastmouseY = 500 :
          (p.mouseY < 0) ?
            lastmouseY = 0 :  
            lastmouseY = p.mouseY;
      }
      // console.log("r", p.mouseX, p.mouseY);
      // console.log("nr", lastmouseX, lastmouseY);
    };
}

new p5(s1, "scripts");

const s2 = p => {
  p.setup = () => {
    let w = lastmouseX-firstmouseX;
    let h = lastmouseY-firstmouseY;
    p.createCanvas(150, 150);
    p.image(video.get(firstmouseX, firstmouseY, w, h), 0, 0, 150, 150);
  };
};

const s3 = p => {
  let w, h;
  let fx, fy;
  p.setup = () => {
    w = lastmouseX-firstmouseX;
    h = lastmouseY-firstmouseY;
    fx = firstmouseX;
    fy = firstmouseY;
    p.createCanvas(150, 150);
  };
  p.draw = () => {
    p.image(video.get(fx, fy, w, h), 0, 0, 150, 150);
  };
};

Answer 1

您遇到的一个潜在问题是，如果释放鼠标按钮时鼠标位置的 x 或 y 值小于按下按钮时的鼠标位置，那么您您正在绘制的图像部分将以负宽度或高度结束，这是行不通的。这是一个简单的修复：

const s2 = p => {
  p.setup = () => {
    let w = p.abs(lastmouseX-firstmouseX);
    let h = p.abs(lastmouseY-firstmouseY);
    p.createCanvas(150, 150);
    p.image(video.get(p.min(firstmouseX, lastmouseX), p.min(firstmouseY, lastmouseY), w, h), 0, 0, w, h);
  };
};

const s3 = p => {
  let w, h;
  let fx, fy;
  p.setup = () => {
    w = p.abs(lastmouseX-firstmouseX);
    h = p.abs(lastmouseY-firstmouseY);
    fx = p.min(firstmouseX, lastmouseX);
    fy = p.min(firstmouseY, lastmouseY);
    p.createCanvas(150, 150);
  };
  p.draw = () => {
    p.image(video.get(fx, fy, w, h), 0, 0, w, h);
  };
};

在计算选定区域的宽度和高度时，我们使用差值的绝对值，在求左坐标和上坐标时，我们分别使用两个值 x 或 y 值中的较小值。

https://editor.p5js.org/Kumu-Paul/sketches/DrKz9rYbp

从网络摄像头选择区域到屏幕截图并在 p5js 中捕获不起作用

Selecting area from webcam to screenshot and capture in p5js not working

javascript

p5.js