全新推出：LiteRT：Google 专为设备端 AI 打造的高性能运行时，以前称为 TensorFlow Lite。

此页面由 Cloud Translation API 翻译。

Web 图像分割指南

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

代码示例

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

设置

本部分介绍了专门用于使用图片分割器设置开发环境和代码项目的关键步骤。有关设置开发环境以使用 MediaPipe 任务，包括平台版本要求，请参阅网页版设置指南。

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 Image Segmenter 任务需要一个与此训练兼容的模型，任务。如需详细了解适用于图片分割器的可用训练模型，请参阅任务概览的“模型”部分。

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

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

创建任务

使用其中一个图像分割器 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`”时才能使用	不适用	不适用

准备数据

图像分割工具能够以托管浏览器该任务还会处理数据输入预处理，包括调整大小、旋转和值归一化。

运行对图片分割工具 segment() 和 segmentForVideo() 方法的调用同时阻塞界面线程。如果您要对设备摄像头拍摄的视频帧中的对象进行分割，则每个分割任务都会阻塞主线程。为防止这种情况发生，您可以设置 Web Worker 在另一个线程上使用了 segment() 和 segmentForVideo()。

运行任务

图片分割器使用 segment() 方法（图片模式）和 segmentForVideo() 方法（video 模式）触发推理。通过图片分割工具将检测到的片段作为图片数据返回给回调函数。

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

肖像

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]。

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

类别价值

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

原始图片和类别蒙版输出。来自 2012 年 Pascal VOC 数据集。

图像分割器示例代码演示了如何显示分割，结果，请参阅代码示例了解详情。