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

此页面由 Cloud Translation API 翻译。

Web 图像分割指南

通过 MediaPipe Image Segmenter 任务，您可以根据预定义的用于应用视觉效果的类别，例如背景模糊处理。这些说明如何使用适用于 Node 和 Web 应用的图像分割器。对于功能、模型和配置选项此任务，请参阅概览。

代码示例

图像分割器的示例代码提供了上述代码的完整实现，供您参考。此代码可帮助您测试此任务开始构建您自己的图像分割应用。您可以查看、运行编辑“Image Segmenter”，示例代码只需使用网络浏览器即可。您也可以在 GitHub

设置

本部分介绍了设置开发环境和专门针对使用 Image Segmenter 的项目的代码项目。有关设置开发环境以使用 MediaPipe 任务，包括平台版本要求，请参阅网页版设置指南。

JavaScript 软件包

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

您可以使用以下代码安装本地暂存所需的软件包创建 Deployment

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() 方法与图片模式和采用 video 模式的 segmentForVideo() 方法，用于触发推断。通过图片分割工具将检测到的片段作为图片数据返回给回调函数。

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

映像

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

Video

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 数据集。

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