p5.js摄像头框选区域截图、录制功能失效问题排查

• 框选坐标逻辑缺陷：若用户从右下向左上拖动选框，会出现lastmouseX < firstmouseX、lastmouseY < firstmouseY的情况，计算得到的宽高为负数，video.get()传入负宽高无法获取有效像素，最终渲染空白。
• p5多实例上下文不匹配：代码采用p5多实例模式开发，video对象是在主实例s1的上下文中创建的，video.get()的执行依赖主实例的渲染上下文，而s2、s3是独立的p5实例，在这两个实例内直接调用video.get()无法正常读取视频像素。
• 视频与画布分辨率不匹配：视频被缩放到700x500绘制在主画布上，但摄像头原始输出分辨率不一定等于700x500，直接用画布选框坐标截取原始视频像素，坐标对应错误也会导致截取内容为空。

1. 首先修复框选坐标逻辑，不管拖动方向如何都统一计算正宽高和正确的左上角坐标，修改s1的mouseReleased方法：

p.mouseReleased = () => {
  if (!(p.mouseX > 710 || p.mouseX < -10 || p.mouseY < -10 || p.mouseY > 510)) {
    // 限制坐标在画布范围内
    const rx = p.constrain(p.mouseX, 0, 700);
    const ry = p.constrain(p.mouseY, 0, 500);
    // 统一取小值为左上角，大值为右下角
    firstmouseX = Math.min(firstmouseX, rx);
    firstmouseY = Math.min(firstmouseY, ry);
    lastmouseX = Math.max(firstmouseX, rx);
    lastmouseY = Math.max(firstmouseY, ry);
  }
};

2. 创建视频时主动设置尺寸和画布一致，避免分辨率不匹配：

video = p.createCapture(p.VIDEO);
// 新增这行，将视频原始尺寸设置为和画布一致
video.size(700, 500);
video.hide();

3. 调整多实例传参逻辑，在主实例中完成像素读取后再传给子实例，避免上下文不匹配：

• 修改按钮触发逻辑：

// Add screenshot按钮逻辑
button1.mousePressed(() => {
  const w = lastmouseX - firstmouseX;
  const h = lastmouseY - firstmouseY;
  // 在主实例上下文中读取截取区域像素
  const shotImg = video.get(firstmouseX, firstmouseY, w, h);
  // 将图像传给s2实例
  shots.push(new p5((p) => s2(p, shotImg), "screenshotbox"));
});

// Add capture按钮逻辑
button2.mousePressed(() => {
  const w = lastmouseX - firstmouseX;
  const h = lastmouseY - firstmouseY;
  captures.push(new p5((p) => s3(p, video, firstmouseX, firstmouseY, w, h), "capturebox"));
});

• 调整s2、s3实例定义，接收传入的参数：

const s2 = (p, img) => {
  p.setup = () => {
    p.createCanvas(150, 150);
    p.image(img, 0, 0, 150, 150);
  };
};

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

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