如何修改p5.js中bodySegmentation人体部位蒙版的默认背景？

我尝试修改检测到的人体部位后方的背景，但始终无法生效。尽管我修改了background(...)函数，背景仍默认显示为白色。请问有人能解释原因吗？

我的代码： #

let bodySegmentation;
let video;
let segmentation;

let options = {
  maskType: "parts",
};

function preload() {
  bodySegmentation = ml5.bodySegmentation("BodyPix", options);
}

function setup() {
  createCanvas(640, 480);
  // Create the video
  video = createCapture(VIDEO);
  video.size(640, 480);
  video.hide();

  bodySegmentation.detectStart(video, gotResults);
}

function draw() {
  background(0,0,0);
  image(video, 0, 0);
  if (segmentation) {
    image(segmentation.mask, 0, 0, width, height);
  }
}

// callback function for body segmentation
function gotResults(result) {
  segmentation = result;
}

问题原因及解决方法 #

问题出在绘制顺序和蒙版的使用方式上：

• 你先画了黑色背景，紧接着就绘制了完整的视频画面，视频直接把背景完全盖住了，所以设置的背景根本没法显示。
• BodyPix生成的蒙版默认是白色人体+透明背景的格式，直接用image()画蒙版，只是把白色叠加在视频上，不会替换掉视频里人体以外的区域。

调整后的draw()函数就能解决问题：

function draw() {
  background(0, 0, 0); // 这里设置你想要的背景色
  if (segmentation) {
    video.mask(segmentation.mask); // 用蒙版遮罩视频，只保留人体部分
  }
  image(video, 0, 0); // 绘制被遮罩后的视频，此时背景就会露出来
}

额外注意：

• 必须等segmentation加载完成后再调用video.mask()，不然会触发错误，代码里的if (segmentation)判断已经处理了这个问题
• 如果需要调整蒙版的显示效果，可以尝试blendMode()函数切换混合模式，但上面的方法是最直接实现“人体显示+自定义背景”的方式

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