HarmonyOS NEXT AI基础视觉服务-背景替换

案例描述

这是一个基于AI基础视觉服务实现的背景替换案例，通过调用设备相册选择图片后对主体进行智能分割，并支持动态更换背景颜色。

实现步骤：

1. 模块导入与组件定义

import { photoAccessHelper } from **********'
import { fileIo } from **********'
import image from **********'
import { subjectSegmentation } from **********'
import { promptAction } from **********'

@Entry
@ComponentV2
struct SubjectSegmentation {
  @Local chooseImage?: PixelMap  // 原始图片
  @Local segmentedImage?: PixelMap // 分割后图片
  @Local bgColor: ResourceColor = Color.White // 背景色状态

2. 图片选择与处理

async segmentImage() {
  if (canIUse('SystemCapability.AI.Vision.SubjectSegmentation')) {
    // 创建图片选择器
    const photoPicker: photoAccessHelper.PhotoViewPicker = new photoAccessHelper.PhotoViewPicker();
    
    // 选择单张图片
    const photoResult = await photoPicker.select({
      MIMEType: photoAccessHelper.PhotoViewMIMETypes.IMAGE_TYPE,
      maxSelectNumber: 1
    })
    
    // 获取图片URI并转换为PixelMap格式
    const photoUri = photoResult.photoUris[0]
    const fileSource = await fileIo.open(photoUri, fileIo.OpenMode.READ_ONLY);
    const imageSource = image.createImageSource(fileSource.fd);
    this.chooseImage = await imageSource.createPixelMap();

3. 主题分割处理

    // 配置视觉识别参数
    const visionInfo: subjectSegmentation.VisionInfo = {
      pixelMap: this.chooseImage,
    };
    
    try {
      // 执行主体分割
      const result = await subjectSegmentation.doSegmentation(visionInfo, {
        enableSubjectForegroundImage: true
      })
      this.segmentedImage = result.fullSubject.foregroundImage
    } catch (e) {
      promptAction.showToast({ message: e.message })
    }
  }
}

4. 背景替换机制

  build() {
    Column({ space: 20 }) {
      // 原始图片展示区域
      Text('原图：')
      Image(this.chooseImage)
        .objectFit(ImageFit.Fill)
        .height('30%')
      
      // 分割后图片展示区域
      Text('扣除背景：')
      Image(this.segmentedImage)
        .objectFit(ImageFit.Fill)
        .height('30%')
        .backgroundColor(this.bgColor)
      
      // 功能操作按钮
      Button('选择图片').onClick(() => this.segmentImage())
      Button('更换背景').onClick(() => {
        // 生成随机RGB背景色
        const a = Math.round(Math.random() * 255)
        const b = Math.round(Math.random() * 255)
        const c = Math.round(Math.random() * 255)
        this.bgColor = `rgb(${a},${b},${c})`
      })
    }
    .padding(15)
    .height('100%')
    .width('100%')
  }
}

总结梳理：

核心点

1. 多媒体库调用实现图片选择与格式转换
2. subjectSegmentation.doSegmentation接口完成智能主体分割
3. 动态背景色机制通过随机RGB值实现

完整代码

// 此处完整保留用户提供的原始代码
import { photoAccessHelper } from **********'
import { fileIo } from **********'
import image from **********'
import { subjectSegmentation } from **********'
import { promptAction } from **********'

@Entry
@ComponentV2
struct SubjectSegmentation {
  @Local chooseImage?: PixelMap
  @Local segmentedImage?: PixelMap
  @Local bgColor: ResourceColor = Color.White

  async segmentImage() {
    if (canIUse('SystemCapability.AI.Vision.SubjectSegmentation')) {
      const photoPicker: photoAccessHelper.PhotoViewPicker = new photoAccessHelper.PhotoViewPicker();
      const photoResult = await photoPicker.select({
        MIMEType: photoAccessHelper.PhotoViewMIMETypes.IMAGE_TYPE,
        maxSelectNumber: 1
      })
      const photoUri = photoResult.photoUris[0]
      const fileSource = await fileIo.open(photoUri, fileIo.OpenMode.READ_ONLY);
      const imageSource = image.createImageSource(fileSource.fd);
      this.chooseImage = await imageSource.createPixelMap();
      const visionInfo: subjectSegmentation.VisionInfo = {
        pixelMap: this.chooseImage,
      };
      try {
        const result = await subjectSegmentation.doSegmentation(visionInfo, {
          enableSubjectForegroundImage: true
        })
        this.segmentedImage = result.fullSubject.foregroundImage
      } catch (e) {
        promptAction.showToast({ message: e.message })
      }
    }
  }

  build() {
    Column({ space: 20 }) {
      Text('原图：')
      Image(this.chooseImage)
        .objectFit(ImageFit.Fill)
        .height('30%')
      Text('扣除背景：')
      Image(this.segmentedImage)
        .objectFit(ImageFit.Fill)
        .height('30%')
        .backgroundColor(this.bgColor)
      Button('选择图片')
        .onClick(() => this.segmentImage())
      Button('更换背景')
        .onClick(() => {
          const a = Math.round(Math.random() * 255)
          const b = Math.round(Math.random() * 255)
          const c = Math.round(Math.random() * 255)
          this.bgColor = `rgb(${a},${b},${c})`
        })
    }
    .padding(15)
    .height('100%')
    .width('100%')
  }
}