Web 图像分割指南

借助 MediaPipe 图片分割器任务，您可以根据预定义的类别将图片划分为多个区域，以应用背景模糊处理等视觉效果。以下说明介绍了如何将图片分割器用于 Node 和 Web 应用。如需详细了解此任务的功能、模型和配置选项，请参阅概览。

代码示例

图片分割器的示例代码提供了此任务在 JavaScript 中的完整实现，供您参考。此代码可帮助您测试此任务，并开始构建自己的图像分割应用。您只需使用网络浏览器即可查看、运行和修改图像分割器示例代码。您还可以在 GitHub 上查看此示例的代码。

设置

本部分介绍了专门用于使用图片分割器设置开发环境和代码项目的关键步骤。如需了解如何设置开发环境以使用 MediaPipe 任务（包括平台版本要求）的一般信息，请参阅适用于 Web 的设置指南。

JavaScript 软件包

可通过 MediaPipe @mediapipe/tasks-vision NPM 软件包获取图片分割器代码。您可以通过平台设置指南中提供的链接找到并下载这些库。

您可以使用以下命令通过以下代码安装本地暂存区所需的软件包：

npm install --save @mediapipe/tasks-vision

如果您想通过内容分发网络 (CDN) 服务导入任务代码，请在 HTML 文件的 标记中添加以下代码：

<head>
  <script src="https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision/vision_bundle.js"
    crossorigin="anonymous"></script>
</head>

型号

MediaPipe 图片分割器任务需要与此任务兼容的训练模型。如需详细了解适用于图片分割器的可用训练模型，请参阅任务概览的“模型”部分。

选择并下载模型，然后将其存储在项目目录中：

<dev-project-root>/app/shared/models/

创建任务

使用 Image Segmenter createFrom...() 函数之一准备任务以运行推理。将 createFromModelPath() 函数与经过训练的模型文件的相对路径或绝对路径搭配使用。如果您的模型已加载到内存中，则可以使用 createFromModelBuffer() 方法。

以下代码示例演示了如何使用 createFromOptions() 函数设置任务。借助 createFromOptions 函数，您可以使用配置选项自定义图像分割器。如需详细了解任务配置，请参阅配置选项。

以下代码演示了如何使用自定义选项构建和配置任务：

runningMode = "IMAGE";

async function createImageSegmenter() {
  const vision = await FilesetResolver.forVisionTasks(
    "https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision@latest/wasm"
  );

  imageSegmenter = await ImageSegmenter.createFromOptions(vision, {
    baseOptions: {
      modelAssetPath:
        "https://storage.googleapis.com/mediapipe-assets/deeplabv3.tflite?generation=1661875711618421",
    },
    outputCategoryMask: true,
    outputConfidenceMasks: false
    runningMode: runningMode
  });
}
createImageSegmenter();

如需更完整地了解如何创建图片分割器任务，请参阅代码示例。

配置选项

此任务针对 Web 应用提供了以下配置选项：

选项名称 说明 值范围 默认值
outputCategoryMask 如果设置为 True，输出将包含一个分割掩码（作为 uint8 图片），其中每个像素值都表示胜出的类别值。 {True, False} False
outputConfidenceMasks 如果设为 True，输出将包含作为浮点值图片的分割掩码，其中每个浮点值代表相应类别的置信度得分映射。 {True, False} True
displayNamesLocale 设置要为任务模型的元数据（如果有）中提供的显示名称使用的标签语言。默认值为 en（英语）。您可以使用 TensorFlow Lite Metadata Writer API 向自定义模型的元数据添加本地化标签 语言区域代码 en
resultListener 设置结果监听器，以便在图片分割器处于 LIVE_STREAM 模式时异步接收分割结果。 仅当运行模式设置为 LIVE_STREAM 时才能使用 不适用 不适用

准备数据

图片分割器可以使用托管浏览器支持的任何格式对图片中的对象进行分割。该任务还会处理数据输入预处理，包括调整大小、旋转和值归一化。

对 Image Segmenter segment() 和 segmentForVideo() 方法的调用会同步运行并阻塞界面线程。如果您要对设备摄像头拍摄的视频帧中的对象进行分割，则每个分割任务都会阻塞主线程。您可以通过实现 Web Worker 在其他线程上运行 segment() 和 segmentForVideo() 来防止这种情况。

运行任务

图片分割器使用 segment() 方法（图片模式）和 segmentForVideo() 方法（video 模式）触发推理。图像分割器会将检测到的分段作为图像数据返回给您在为任务运行推理时设置的回调函数。

以下代码演示了如何使用任务模型执行处理：

Image

const image = document.getElementById("image") as HTMLImageElement;
imageSegmenter.segment(image, callback);

视频

async function renderLoop(): void {
  const video = document.getElementById("video");
  let startTimeMs = performance.now();

  imageSegmenter.segmentForVideo(video, startTimeMs, callbackForVideo);

  requestAnimationFrame(() => {
    renderLoop();
  });
}

如需更完整地实现运行图片分割器任务，请参阅代码示例。

处理和显示结果

运行推理后，图片分割器任务会将分割图像数据返回给回调函数。输出内容取决于您在配置任务时设置的 outputType。

以下部分显示了此任务的输出数据示例：

类别置信度

以下图片显示了类别置信度掩码的任务输出可视化结果。置信度掩码输出包含介于 [0, 1] 之间的浮点值。

两个女孩骑着马，还有一个女孩在马旁边走着 图片蒙版，用于勾勒出前一张照片中女孩和马的形状。系统捕获了图片左半部分的轮廓，但未捕获图片右半部分的轮廓

原始图片和类别置信度蒙版输出。来自 Pascal VOC 2012 数据集的源图像。

类别价值

以下图片显示了类别值掩码的任务输出的可视化结果。类别掩码范围为 [0, 255]，每个像素值代表模型输出的胜出类别索引。胜出类别索引是模型可以识别的类别中得分最高的类别。

两个女孩骑着马，还有一个女孩在马旁边走着 图片蒙版，用于勾勒出上图中女孩和马的形状。三个女孩和马匹的形状都已准确遮盖

原始图片和类别遮罩输出。来自 Pascal VOC 2012 数据集的源图像。

图片分割器示例代码演示了如何显示任务返回的分割结果，如需了解详情，请参阅代码示例。