HarmonyOS开发-系统AI视觉能力-图片识别

HarmonyOS开发-系统AI视觉能力-图片识别

简介

本文继续介绍HarmonyOS提供的AI能力,Core Vision Kit(基础视觉服务)提供了机器视觉相关的基础能力,本文将着重梳理一下AI视觉服务的使用流程,代码实现等,我们整体的流程是先从手机中选取图片,可以使用本地图片,也可以拍照,选取图片后,我们进行图片识别,话不多说,我们直接上代码

开发步骤:

第一步:我们先要引入视觉服务的工具类,我们这次演示的功能是文字识别,所以我们引入对应的文字

复制代码
import { textRecognition } from '@kit.CoreVisionKit'

另外,我们是在图片识别中需要用图片,选取本地文件和拍照功能,所以我们要对应引入图片的工具类,文件操作工具类,拍照工具类

复制代码
import { image } from '@kit.ImageKit';
import { fileIo } from '@kit.CoreFileKit';
import { photoAccessHelper } from '@kit.MediaLibraryKit';

第二步:根据图片识别的步骤,我们需要先选取图片,定义一个图片选取的方法,其中可以调用拍照,代码如下:

复制代码
 //选择图片
   async selectImage() {
 //这里我们调用图片选取的方法,方法在下面定义了
    let uri = await this.openPicture();
 
    console.log("xwq:::"+JSON.stringify(uri))
    setTimeout(
      async () => {
        let imageSource: image.ImageSource | undefined = undefined;
        let fileSource = await fileIo.open(uri, fileIo.OpenMode.READ_ONLY);
        imageSource = image.createImageSource(fileSource.fd);
        this.chooseImage = await imageSource.createPixelMap();
    },100)

  }
    })
  }

第三步:打开图片选取picker,这块是单独的媒体管理能力,稍后我们另外去讲解

复制代码
```
//打开本地入库
openPicture(): Promise<string> {
    return new Promise<string>((resolve) => {
      let photoPicker: photoAccessHelper.PhotoViewPicker = new photoAccessHelper.PhotoViewPicker();
      photoPicker.select({
        MIMEType: photoAccessHelper.PhotoViewMIMETypes.IMAGE_TYPE,
        maxSelectNumber: 1
      }).then((res: photoAccessHelper.PhotoSelectResult) => {
        resolve(res.photoUris[0]);
      }).catch((err: BusinessError) => {
        resolve('');
      })
    })
  }
```

第四步:对选取的图片进行文字识别,我们使用什么样的功能就选用对用的方法,在这里,我们使用textRecognition.recognizeText方法,这里的参数我们按照官方的文档参数进行填写即可

复制代码
textRecogn() {
    // 调用文本识别接口
    if (!this.chooseImage) {
      return
    }
    //VisionInfo为待OCR检测识别的入参项,目前仅支持PixelMap类型的视觉信息。
    let visionInfo: textRecognition.VisionInfo = {
      pixelMap: this.chooseImage
    };
    //配置通用文本识别的配置项TextRecognitionConfiguration,用于配置是否支持朝向检测
    let textConfiguration: textRecognition.TextRecognitionConfiguration = {
      isDirectionDetectionSupported: false
    };
    textRecognition.recognizeText(visionInfo, textConfiguration)
      .then((data: textRecognition.TextRecognitionResult) => {
        // 将结果更新到Text中显示
        this.dataValues = data.value;
      })
      .catch((error: BusinessError) => {
        this.dataValues = `Error: ${error.message}`;
      });
  }

基于以上四步,就可以完成整体文字识别的功能,以下为完整的代码,可直接复制使用:

复制代码
import { image } from '@kit.ImageKit';
import { fileIo } from '@kit.CoreFileKit';
import { objectDetection, visionBase } from '@kit.CoreVisionKit';
import { photoAccessHelper } from '@kit.MediaLibraryKit';
import { BusinessError } from '@kit.BasicServicesKit';
import { textRecognition } from '@kit.CoreVisionKit'

@Entry
@Component
struct Index {
  private imageSource: image.ImageSource | undefined = undefined;
  @State chooseImage: PixelMap | undefined = undefined
  @State dataValues: string = ''

  async aboutToAppear(): Promise<void> {
    const initResult = await textRecognition.init();
  }
  openPicture(): Promise<string> {
    return new Promise<string>((resolve) => {
      let photoPicker: photoAccessHelper.PhotoViewPicker = new photoAccessHelper.PhotoViewPicker();
      photoPicker.select({
        MIMEType: photoAccessHelper.PhotoViewMIMETypes.IMAGE_TYPE,
        maxSelectNumber: 1
      }).then((res: photoAccessHelper.PhotoSelectResult) => {
        resolve(res.photoUris[0]);
      }).catch((err: BusinessError) => {
        resolve('');
      })
    })
  }

  async selectImage() {
    let uri = await this.openPicture();
    console.log("xwq:::"+JSON.stringify(uri))
    setTimeout(
      async () => {
        let imageSource: image.ImageSource | undefined = undefined;
        let fileSource = await fileIo.open(uri, fileIo.OpenMode.READ_ONLY);
        imageSource = image.createImageSource(fileSource.fd);
        this.chooseImage = await imageSource.createPixelMap();
    },100)

  }

  textRecogn() {
    // 调用文本识别接口
    if (!this.chooseImage) {
      return
    }
    //VisionInfo为待OCR检测识别的入参项,目前仅支持PixelMap类型的视觉信息。
    let visionInfo: textRecognition.VisionInfo = {
      pixelMap: this.chooseImage
    };
    //配置通用文本识别的配置项TextRecognitionConfiguration,用于配置是否支持朝向检测
    let textConfiguration: textRecognition.TextRecognitionConfiguration = {
      isDirectionDetectionSupported: false
    };
    textRecognition.recognizeText(visionInfo, textConfiguration)
      .then((data: textRecognition.TextRecognitionResult) => {
        // 将结果更新到Text中显示
        this.dataValues = data.value;
      })
      .catch((error: BusinessError) => {
        this.dataValues = `Error: ${error.message}`;
      });
  }

  build() {
    Column() {
      Image(this.chooseImage)
        .objectFit(ImageFit.Fill)
        .height('60%')

      Text(this.dataValues)
        .copyOption(CopyOptions.LocalDevice)
        .height('15%')
        .margin(10)
        .width('60%')

      Button('选择图片')
        .type(ButtonType.Capsule)
        .fontColor(Color.White)
        .alignSelf(ItemAlign.Center)
        .width('80%')
        .margin(10)
        .onClick(() => {
          // 拉起图库
          this.selectImage()
        })

      Button('文字识别')
        .type(ButtonType.Capsule)
        .fontColor(Color.White)
        .alignSelf(ItemAlign.Center)
        .width('80%')
        .margin(10)
        .onClick(async () => {
          this.textRecogn()
        })
    }
    .width('100%')
    .height('100%')
    .justifyContent(FlexAlign.Center)
  }
}

欢迎大家跟我一起学习鸿蒙开发知识,加入我的班级,参与HarmonyOS赋能资源丰富度建设(第四期),获得HarmonyOS应用开发者认证 每月对前200名学员进行激励,活动期间共计激励1000名

华为开发者学堂

相关推荐
深圳行云创新9 分钟前
智能体架构之争:单Agent加Skills,还是多加几个Agent
人工智能·架构·软件工程
用户3600555790012 分钟前
Kestrel_VLLM - 31 · MTP 头上 GPU:一个独立槽位,与一条抽出来共用的注意力
人工智能
老金带你玩AI19 分钟前
Codex改了又测、测了又改,我一查Token才发现这个坑
人工智能
IT_陈寒34 分钟前
当Java的hashCode遇上Lombok,我的缓存被全清了
前端·人工智能·后端
刘胡子大叔42 分钟前
评测驱动优化:失败样本回流 Prompt 的闭环
人工智能·prompt
这个DBA有点耶44 分钟前
内核级AI与多模融合:AI数据库在海外场景的落地要点
数据库·人工智能·架构
涛思数据(TDengine)1 小时前
从工业本体到 AI 原生:TDengine 出席 2026 QCon 分享工业数据基础设施路径
大数据·数据库·人工智能·tdengine·工业
yz_aiks1 小时前
WorkBuddy 怎么做网页小游戏:深海钓鱼游戏 43 次对话、301 积分从一句话做到发布(附手机横屏踩坑)
人工智能·html5·ai编程·小游戏·workbuddy
byte轻骑兵1 小时前
【LMP】规范精讲[12]: 链路层的花名册——一张表数完88条指令的门道
人工智能·蓝牙协议·lmp·蓝牙链路管理·通信学习