如何使用MediaPipe多类别自拍分割模型实现头发衣物区域变白？

需求描述 #

使用MediaPipe库检测图像中的头发和衣物区域，将这些区域填充为白色，其余区域保留原始图像内容。

修改后的回调函数代码 #

function callback(result) {
    const cxt = canvasClick.getContext("2d");
    const { width, height } = result.categoryMask;

    // 获取原始图像数据
    let imageData = cxt.getImageData(0, 0, width, height).data;
    canvasClick.width = width;
    canvasClick.height = height;

    const mask = result.categoryMask.getAsUint8Array();
    // 对应DeepLab-v3模型中头发、衣物的掩码值
    const targetMaskValues = [1, 4];

    for (let i = 0; i < mask.length; i++) {
        // 判断当前像素是否属于头发或衣物区域
        if (targetMaskValues.includes(mask[i])) {
            // 设置为纯白色，Alpha通道保留原始透明度
            imageData[i * 4] = 255;     // R通道
            imageData[i * 4 + 1] = 255; // G通道
            imageData[i * 4 + 2] = 255; // B通道
            // 若需要强制不透明，可替换为 imageData[i * 4 + 3] = 255;
        }
        // 非目标区域保持原始像素不变
    }
    
    const uint8Array = new Uint8ClampedArray(imageData.buffer);
    const dataNew = new ImageData(uint8Array, width, height);
    cxt.putImageData(dataNew, 0, 0);

    // 更新结果显示文本
    const p = event.target.parentNode.getElementsByClassName("classification")[0];
    p.classList.remove("removed");
    p.innerText = "已完成头发与衣物区域的白色填充";
}

代码关键说明 #

• 掩码匹配逻辑：基于MediaPipe DeepLab-v3模型的分类规则，头发对应的掩码值为1，衣物对应的掩码值为4，通过数组targetMaskValues筛选目标区域。
• 像素处理规则：目标区域直接将RGB通道设为255实现白色填充，Alpha通道默认保留原始图像的透明度；若需要完全不透明，可手动将Alpha通道值改为255。
• 原始区域保留：非头发/衣物的区域直接复用原始图像的像素数据，无需额外修改。

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