鸿蒙中AI识图能力：Vision Kit

梦想不只是梦与想

10人浏览 · 2026-06-19 06:45:00

梦想不只是梦与想 · 2026-06-19 06:45:00 发布

AI识图能力可以帮助用户从图片中获取更多信息。AI识图通过聚合OCR、主体分割、实体识别、多目标识别等AI能力，提供场景化的文本识别、主体分割、识图搜索功能。

一、AI识图

AI识图目前支持的控件包括：

控件	说明
Image	静态图片上的识图功能
Video	视频播放暂停帧的识图功能
XComponent	自定义渲染等场景下的图像识图功能

核心能力

能力	说明
识别文字	长按文本选取文字；持续长按电话号码、邮箱、网址、地址、时间等实体触发快捷操作
识图搜索	抠图后基于主体进行识图搜索；主动触发目标标识识别动物、植物、建筑物等
主体分割	长按主体分割后，可复制、分享、全选、识图搜索
AIButton	实体显性下划线标识、原图翻译、表格提取

AIButton功能

功能	说明
实体标识	电话号码、邮箱、网址、地址、时间的显性下划线标识
原图翻译	系统设置语种与图片上文本语种不一致时出现
表格提取	图片中存在表格时出现

注意：配置AIButton属性可见后，会对图片进行预分析，当图片中存在文本且文本区域大于图片区域的5%时AIButton才会显示。

使用建议

场景	建议
大图预览	建议打开AI识图能力，用户对图片内容更感兴趣
AIButton	根据业务场景按需提供，开启会触发预分析导致功耗开销

二、限制

限制项	说明
文本语种	简体中文、繁体中文、英文、维吾尔文、藏文
图片分辨率	最小100×100
图像类型	静态非矢量图（svg、gif不支持），支持RGBA_8888类型的PixelMap
翻译比例	宽高最小比例1:3（高度<宽度的3倍）
文本识别比例	宽高最小比例1:7（高度<宽度的7倍）

三、判断设备支持情况

import { visionImageAnalyzer } from '@kit.VisionKit';

let supportTypes = this.aiController.getImageAnalyzerSupportTypes();
console.info(`supportTypes: ${JSON.stringify(supportTypes)}`);

返回值：

SupportTypes: []：当前设备不支持AI识图能力
返回其他值：当前设备支持AI识图能力

返回格式为："SupportTypes: [主体识别, 文字识别, 对象查找]"，具体枚举值参见ImageAnalyzerType。

四、开发步骤

4.1 导入模块

import { visionImageAnalyzer } from '@kit.VisionKit';
import { BusinessError } from '@kit.BasicServicesKit';

4.2 初始化Controller

private visionImageAnalyzerController: visionImageAnalyzer.VisionImageAnalyzerController = 
  new visionImageAnalyzer.VisionImageAnalyzerController();
private isSupportImageAnalyzer: boolean = false;

4.3 判断设备支持并注册监听

aboutToAppear(): void {
  let supportTypes = this.visionImageAnalyzerController.getImageAnalyzerSupportTypes();
  if (supportTypes.length > 0) {
    this.isSupportImageAnalyzer = true;
    this.registerListener();
  }
}

4.4 注册事件监听

registerListener() {
  // 识图可见性变化
  this.visionImageAnalyzerController.on('imageAnalyzerVisibilityChange', (visibility) => {
    console.info(`visibility: ${JSON.stringify(visibility)}`);
  });

  // 文本分析结果
  this.visionImageAnalyzerController.on('textAnalysis', (text: string) => {
    console.info(`text: ${JSON.stringify(text)}`);
  });

  // 选中文本变化
  this.visionImageAnalyzerController.on('selectedTextChange', (selectedText: string) => {
    console.info(`selectedText: ${JSON.stringify(selectedText)}`);
  });

  // 主体分析结果
  this.visionImageAnalyzerController.on('subjectAnalysis', (subjects) => {
    console.info(`subjects: ${JSON.stringify(subjects)}`);
  });

  // 选中主体变化
  this.visionImageAnalyzerController.on('selectedSubjectsChange', (subjects) => {
    console.info(`subjects: ${JSON.stringify(subjects)}`);
  });

  // 识图失败
  this.visionImageAnalyzerController.on('analyzerFailed', (error: BusinessError) => {
    console.error(`analyzerFailed: ${JSON.stringify(error)}`);
  });
}

4.5 取消事件监听

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');
}

4.6 绑定Controller到Image组件

Image($r('app.media.img'), {
  types: [
    ImageAnalyzerType.TEXT,        // 文本识别
    ImageAnalyzerType.SUBJECT,     // 主体分割
    ImageAnalyzerType.OBJECT_LOOKUP // 识图搜索
  ],
  aiController: this.visionImageAnalyzerController
})
.width('100%')
.height('100%')
.enableAnalyzer(this.isSupportImageAnalyzer ? true : false)
.objectFit(ImageFit.Contain)

五、完整示例

import { visionImageAnalyzer } from '@kit.VisionKit';
import { BusinessError } from '@kit.BasicServicesKit';

@Entry
@Component
struct ImageDemo {
  private visionImageAnalyzerController: visionImageAnalyzer.VisionImageAnalyzerController = 
    new visionImageAnalyzer.VisionImageAnalyzerController();
  private isSupportImageAnalyzer: boolean = false;

  aboutToAppear(): void {
    let supportTypes = this.visionImageAnalyzerController.getImageAnalyzerSupportTypes();
    if (supportTypes.length > 0) {
      this.isSupportImageAnalyzer = true;
      this.registerListener();
    }
  }

  registerListener() {
    this.visionImageAnalyzerController.on('imageAnalyzerVisibilityChange', (visibility) => {
      console.info(`visibility: ${JSON.stringify(visibility)}`);
    });

    this.visionImageAnalyzerController.on('textAnalysis', (text: string) => {
      console.info(`text: ${JSON.stringify(text)}`);
    });

    this.visionImageAnalyzerController.on('selectedTextChange', (selectedText: string) => {
      console.info(`selectedText: ${JSON.stringify(selectedText)}`);
    });

    this.visionImageAnalyzerController.on('subjectAnalysis', (subjects) => {
      console.info(`subjects: ${JSON.stringify(subjects)}`);
    });

    this.visionImageAnalyzerController.on('selectedSubjectsChange', (subjects) => {
      console.info(`subjects: ${JSON.stringify(subjects)}`);
    });

    this.visionImageAnalyzerController.on('analyzerFailed', (error: BusinessError) => {
      console.error(`analyzerFailed: ${JSON.stringify(error)}`);
    });
  }

  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');
  }

  build() {
    Stack() {
      Image($r('app.media.img'), {
        types: [
          ImageAnalyzerType.TEXT,
          ImageAnalyzerType.SUBJECT,
          ImageAnalyzerType.OBJECT_LOOKUP
        ],
        aiController: this.visionImageAnalyzerController
      })
      .width('100%')
      .height('100%')
      .enableAnalyzer(this.isSupportImageAnalyzer ? true : false)
      .objectFit(ImageFit.Contain)
    }
    .width('100%')
    .height('100%')
  }
}

六、事件

事件	说明
`imageAnalyzerVisibilityChange`	识图可见性变化
`textAnalysis`	文本分析结果回调
`selectedTextChange`	选中文本变化
`subjectAnalysis`	主体分析结果回调
`selectedSubjectsChange`	选中主体变化
`analyzerFailed`	识图失败回调

注意事项	说明
预分析开销	AIButton开启会触发图片预分析，导致功耗开销
翻译比例	图片宽高最小1:3
文本识别比例	图片宽高最小1:7
图像类型	svg、gif等矢量图/动图不支持