选择区域从网络摄像头截图和捕获在p5js不工作

Question

当我按下"添加截图"按钮时，我想从相机的选定区域截取一张截图。按钮，但除了一个空白的画布外什么也没有出现，还有另一个"按钮将添加另一个画布，以保持捕捉相机的选定区域，当我按下它，但也没有出现除了一个空的画布。我想知道当我按下按钮时实际发生了什么?链接到p5js编辑器中的脚本

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