HarmonyOS NEXT AI 基础视觉服务 - 背景替换
作者：zhousg
- 2025-03-30 北京
本文字数：2427 字
阅读完需：约 8 分钟
案例描述
这是一个基于 AI 基础视觉服务实现的背景替换案例，通过调用设备相册选择图片后对主体进行智能分割，并支持动态更换背景颜色。
实现步骤：
1. 模块导入与组件定义
import { photoAccessHelper } from '@kit.MediaLibraryKit'import { fileIo } from '@kit.CoreFileKit'import image from '@ohos.multimedia.image'import { subjectSegmentation } from '@kit.CoreVisionKit'import { promptAction } from '@kit.ArkUI'
@Entry@ComponentV2struct 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%') }}
复制代码
总结梳理：
核心点
多媒体库调用实现图片选择与格式转换
subjectSegmentation.doSegmentation 接口完成智能主体分割
动态背景色机制通过随机 RGB 值实现
完整代码
// 此处完整保留用户提供的原始代码import { photoAccessHelper } from '@kit.MediaLibraryKit'import { fileIo } from '@kit.CoreFileKit'import image from '@ohos.multimedia.image'import { subjectSegmentation } from '@kit.CoreVisionKit'import { promptAction } from '@kit.ArkUI'
@Entry@ComponentV2struct 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%') }}
复制代码
划线
评论
复制
发布于: 刚刚阅读数: 4
版权声明: 本文为 InfoQ 作者【zhousg】的原创文章。
原文链接:【http://xie.infoq.cn/article/1252873877fdd5310c4de032a】。文章转载请联系作者。
zhousg
关注
还未添加个人签名 2025-03-14 加入
还未添加个人简介
评论