Mediapipe pose SegmentationMask python javascript difference

Question

我正在使用mediapipe姿势库(https://google.github.io/mediapipe/solutions/pose.html)开发姿势识别web应用程序。

我正在使用segmentmask来找到满足约束的人体的一些特定点(第n个像素中的值必须为>

0.1)。我可以用python做这个求值。该库将分割掩码作为与输入图像具有相同宽度和高度的矩阵返回，并包含[0.0,1.0]中的值，其中1.0和0.0分别表示"人"one_answers"背景"像素的高确定性。所以我可以遍历矩阵并且我能够找到满足约束条件的点

我试图做同样的事情在javascript，但我有一个问题。javascript版本的库不返回矩阵，而是返回html画布用来绘制遮罩的ImageBitmap。问题是，使用ImageBitmap，我无法访问矩阵的每个点，并且我无法找到我感兴趣的点。

是否有一种方法来转换javascript segmentationMask ImageBitmap，以便与python版本库的segmenationMask相似，或者至少检索相同的信息(我需要包含在此范围内的值[0.0,1.0]对于图像的每个像素)。

谢谢大家。

Answer 1

不幸的是，没有直接的方法从ImageBitmap中获得ImageData，但是你可以在一个清晰的画布上drawImage()这个ImageBitmap，然后调用ctx.getImageData(0, 0, canvas.width, canvas.height)来检索ImageData，在那里你将获得所有像素数据。

置信度将作为0和255之间的值存储在Alpha通道中(imageData.data中每四个项目)。

function onResults(results) {
canvasCtx.clearRect(0, 0, canvasElement.width, canvasElement.height);
canvasCtx.drawImage(results.segmentationMask, 0, 0,
canvasElement.width, canvasElement.height);
const imgData = canvasCtx.getImageData(0, 0, canvasElement.width, canvasElement.height);
let i = 0;
for (let y = 0; y<imgData.height; y++) {
for (let x = 0; x<imgData.width; x++) {
const confidence = imgData.data[i + 3];
// do something with confidence here
i++;
}
}
}

因为你要从上下文中读取很多内容，所以当你获得它时，不要忘记传递willReadFrequently选项。

作为一个小提琴，因为StackSnippets不允许使用相机。

---

请注意，根据您的操作，您可能希望使用globalCompositeOperation将此图像从红色变为黑色，并将数据视为Uint32Array，其中置信度将在0和0xFF000000之间表示。