鸿蒙应用开发之场景化视觉服务AI识图基础

仿佛云烟

发布于 2025-6-28 16:58

浏览

0收藏

一、工具

DevEco Studio

二、项目介绍

开发步骤
将AI识图控件相关的类添加。
import { visionImageAnalyzer } from '@kit.VisionKit';
import { BusinessError } from '@kit.BasicServicesKit';
初始化VisionImageAnalyzerController对象。
private visionImageAnalyzerController: visionImageAnalyzer.VisionImageAnalyzerController = new visionImageAnalyzer.VisionImageAnalyzerController();
添加订阅事件。
aboutToAppear(): void {
this.visionImageAnalyzerController.on('imageAnalyzerVisibilityChange', (visibility: visionImageAnalyzer.ImageAnalyzerVisibility) => {
console.info("DEMO_TAG", imageAnalyzerVisibilityChange result: ${JSON.stringify(visibility)})
})
this.visionImageAnalyzerController.on('textAnalysis', (text: string) => {
console.info("DEMO_TAG", textAnalysis result: ${JSON.stringify(text)})
})
this.visionImageAnalyzerController.on('selectedTextChange', (selectedText: string) => {
console.info("DEMO_TAG", selectedTextChange result: ${JSON.stringify(selectedText)})
})
this.visionImageAnalyzerController.on('subjectAnalysis', (subjects: visionImageAnalyzer.Subject[]) => {
console.info("DEMO_TAG", subjectAnalysis result: ${JSON.stringify(subjects)})
})
this.visionImageAnalyzerController.on('selectedSubjectsChange', (subjects: visionImageAnalyzer.Subject[]) => {
console.info("DEMO_TAG", selectedSubjectsChange result: ${JSON.stringify(subjects)})
})
this.visionImageAnalyzerController.on('analyzerFailed', (error: BusinessError) => {
console.error("DEMO_TAG", analyzerFailed result: ${JSON.stringify(error)})
})
}
绑定VisionImageAnalyzerController对象，可以控制识图相关的交互。
build() {
Stack() {
// 需要替换您自己的资源图片，存放在resources/base/media目录下
Image($r('app.media.img'), {
types: [ImageAnalyzerType.TEXT, ImageAnalyzerType.SUBJECT, ImageAnalyzerType.OBJECT_LOOKUP],
aiController: this.visionImageAnalyzerController
})
.width('100%')
.height('100%')
.enableAnalyzer(true)
.objectFit(ImageFit.Contain)
}.width('100%').height('100%')
}
取消订阅事件。
aboutToDisappear(): void {
this.visionImageAnalyzerController.off('imageAnalyzerVisibilityChange')
this.visionImageAnalyzerController.off('textAnalysis')
this.visionImageAnalyzerController.off('selectedTextChange')
this.visionImageAnalyzerController.off('subjectAnalysis')
this.visionImageAnalyzerController.off('selectedSubjectsChange')
this.visionImageAnalyzerController.off('analyzerFailed')
}
开发实例
import { visionImageAnalyzer } from '@kit.VisionKit';
import { BusinessError } from '@kit.BasicServicesKit'
@Entry
@Component
export struct ImageDemo {
private visionImageAnalyzerController: visionImageAnalyzer.VisionImageAnalyzerController = new visionImageAnalyzer.VisionImageAnalyzerController()
aboutToAppear(): void {
this.visionImageAnalyzerController.on('imageAnalyzerVisibilityChange', (visibility: visionImageAnalyzer.ImageAnalyzerVisibility) => {
console.info("DEMO_TAG", imageAnalyzerVisibilityChange result: ${JSON.stringify(visibility)})
})
this.visionImageAnalyzerController.on('textAnalysis', (text: string) => {
console.info("DEMO_TAG", textAnalysis result: ${JSON.stringify(text)})
})
this.visionImageAnalyzerController.on('selectedTextChange', (selectedText: string) => {
console.info("DEMO_TAG", selectedTextChange result: ${JSON.stringify(selectedText)})
})
this.visionImageAnalyzerController.on('selectedSubjectsChange', (subjects: visionImageAnalyzer.Subject[]) => {
console.info("DEMO_TAG", selectedSubjectsChange result: ${JSON.stringify(subjects)})
})
this.visionImageAnalyzerController.on('analyzerFailed', (error: BusinessError) => {
console.error("DEMO_TAG", analyzerFailed result: ${JSON.stringify(error)})
})
}
build() {
Stack() {
Image($r('app.media.img'), {
types: [ImageAnalyzerType.TEXT, ImageAnalyzerType.SUBJECT, ImageAnalyzerType.OBJECT_LOOKUP],
aiController: this.visionImageAnalyzerController
})
.width('100%')
.height('100%')
.enableAnalyzer(true)
.objectFit(ImageFit.Contain)
}.width('100%').height('100%')
}
aboutToDisappear(): void {
this.visionImageAnalyzerController.off('imageAnalyzerVisibilityChange')
this.visionImageAnalyzerController.off('textAnalysis')
this.visionImageAnalyzerController.off('selectedTextChange')
this.visionImageAnalyzerController.off('subjectAnalysis')
this.visionImageAnalyzerController.off('selectedSubjectsChange')
this.visionImageAnalyzerController.off('analyzerFailed')
}
}