Mediapipe Pose Python与JS版segmentationMask差异及像素值获取方法

JavaScript端返回的segmentationMask为ImageBitmap格式，无法直接读取像素值，可通过离屏Canvas转存后读取像素数据，最终得到和Python端结构、取值范围完全一致的置信度矩阵，具体实现步骤如下：

• 第一步：创建与输入推理图像等尺寸的离屏Canvas，将分割掩码绘制到画布上

// 替换为你送入Mediapipe推理的原始图像实际宽高
const inputWidth = 640;
const inputHeight = 480;
// 离屏Canvas不会插入DOM，无额外页面渲染开销
const offscreenCanvas = document.createElement('canvas');
offscreenCanvas.width = inputWidth;
offscreenCanvas.height = inputHeight;
const ctx = offscreenCanvas.getContext('2d');
// 将ImageBitmap格式的掩码绘制到离屏画布
ctx.drawImage(segmentationMask, 0, 0, inputWidth, inputHeight);

• 第二步：读取画布像素数据，归一化得到[0.0, 1.0]区间的置信度矩阵
  Mediapipe生成的分割掩码为单通道灰度图，RGBA四个通道的数值完全一致，取任意通道值除以255即可得到和Python端返回值完全对齐的置信度：

const imgData = ctx.getImageData(0, 0, inputWidth, inputHeight);
const rawPixels = imgData.data;
// 初始化和Python端结构一致的二维矩阵：维度为[高度][宽度]
const confidenceMatrix = new Array(inputHeight);
for (let y = 0; y < inputHeight; y++) {
  confidenceMatrix[y] = new Array(inputWidth);
  for (let x = 0; x < inputWidth; x++) {
    // 每个像素对应Uint8ClampedArray中4个连续位置：R/G/B/A，取R通道计算即可
    const pos = (y * inputWidth + x) * 4;
    confidenceMatrix[y][x] = rawPixels[pos] / 255;
  }
}

• 如果不需要保留完整矩阵，仅做阈值筛选，可以跳过二维矩阵生成步骤，直接判断像素值是否满足阈值：人体置信度>0.1对应单通道像素值>25.5，直接遍历rawPixels判断即可，能减少大量内存占用和遍历开销。
• 绘制时必须保证传入drawImage的宽高和送入Mediapipe推理的图像宽高完全一致，否则会出现坐标错位，匹配不到原图像的对应点位。
• 如果运行环境支持OffscreenCanvas，可以替换普通canvas元素，在Web Worker中完成像素读取和计算，避免阻塞主线程。

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