鸿蒙 (HarmonyOS) 原生 AI 能力之文本识别

作者：猫林老师

2024-12-23
广东
本文字数：3170 字
阅读完需：约 10 分钟

原生智能介绍

在之前开发中，很多场景我们是通过调用云端的智能能力进行开发。例如文本识别、人脸识别等。
原生即指将一些能力直接集成在本地鸿蒙系统中，通过不同层次的 AI 能力开放，满足开发者的不同场景下的诉求，降低应用开发门槛，帮助开发者快速实现应用智能化

有哪些原生智能能力

基础视觉服务
基础语音服务
端侧模型部署
端侧推理
意图框架
.........

基础视觉服务 - Core Vision Kit

Core Vision Kit（基础视觉服务）是机器视觉相关的基础能力，接下来要导入的类，都在@kit.VisionKit中例如本篇要讲的文字识别即是如此。

文本识别介绍与使用

概念：将图片中的文字给识别出来
使用 textRecognition 实现文本识别
限制：
仅能识别 5 种语言类型
简体中文、繁体中文、英文、日文、韩文
使用步骤
导入 textRecognition

     import { textRecognition } from '@kit.CoreVisionKit'

复制代码

实例化visionInfo对象，用来准备待识别的图片（需 PixelMap 类型）

     let visionInfo: textRecognition.VisionInfo = {         pixelMap: '待识别图片'     };

复制代码

实例化TextRecognitionConfiguration对象，设置识别配置（目前仅有是否开启朝向检测一项配置）

     let textConfiguration: textRecognition.TextRecognitionConfiguration = {         // 是否开启朝向检测         isDirectionDetectionSupported: false     };

复制代码

调用 textRecognition 的recognizeText接口传入以上两个对象，开启识别并对识别结果进行处理，得到的是TextRecognitionResult类型结果，这个对象的value属性即为识别结果

     textRecognition.recognizeText(visionInfo, textConfiguration)

复制代码

这里解释一下这几步
你需要用 textRecognition，所以需要先找到它，也即导入，这没什么好说的
你需要用它来帮你识别图片，那你是不是应该把需要识别的图片给它？所以第一个参数就是给他传递一个图片，只不过这个图片只能传 PixelMap 类型的（这就是为什么上篇我要写 PixMap 的原因），但是这个图片不能直接传，要包装成 VisionInfo 类型的对象（虽然目前为止，这个对象只有这一个属性，但保不齐未来会加）
然后就是设置一下它识别的相关参数，它目前也只有一个参数，叫isDirectionDetectionSupported，设置是否开启朝向检测，因为有的图片可能是正的，有的图片可能是反的斜的。所以对于反的斜的图片如果这项开启为 true，则会检测的更为准确。但是经过猫林老师肉测，其实开不开启扫描反的斜的图片，得到的结果都差不多了。所以可以看自己选择。顺便一提，这个参数可以不传，不传默认是 true。然后猫林老师觉得：未来随着 API 发展，可能会多一些参数也说不准
最后即为调用其进行识别的方法，也即 recognizeText 开始识别
根据上面所说的，其实上面说的四步，也可以极简改为两步，代码如下

    import { textRecognition } from '@kit.CoreVisionKit'        textRecognition.recognizeText({ pixelMap: '待识别图片' })

复制代码

- 解释：这里就相当于没传第二个参数，它默认值即为true，也即开启朝向检测。

复制代码

至于如何读取相册图片，以及把图片解码变成 PixelMap，不是今天分享的主题，且之前猫林老师有两篇文章分别讲过不会的可以看之前文章，所以这里直接给代码（可看注释）

    // 1. 使用PhotoViewPicker选择相册图片    let photoPicker = new photoAccessHelper.PhotoViewPicker();    // 2. 使用select方法开始选择图片     photoPicker.select({             // 设置只选择图片            MIMEType: photoAccessHelper.PhotoViewMIMETypes.IMAGE_TYPE,             // 设置最大只能选择1张            maxSelectNumber: 1    })    .then((res: photoAccessHelper.PhotoSelectResult) => {       // res参数里的photoUris属性即为选择的图片结果数组（因为可以选择多张），每个元素得到的是临时路径       // 用fs打开这个路径       let fileSource = fileIo.openSync(res.photoUris[0], fileIo.OpenMode.READ_ONLY);       // 使用createImageSource方法将图片文件流常见成图片源码       let imageSource = image.createImageSource(fileSource.fd);       // 再使用createPixelMap方法，将图片源码制作成PixelMap类型       const pixelMap = imageSource.createPixelMapSync()       // 后续使用textRecognition的recognizeText那一套代码进行识别即可    })

复制代码

文本识别展示案例

我们来实现如下图的效果
界面上从上往下放:
Image：显示选择的待识别图片
Button：选择相册里的图片
Button：开始识别按钮
TextArea：显示识别后的结果，使用 TextArea 的原因是它对比 Text 会多一个滚动效果（防止内容过多显示不全）
结合上面说的使用方法，最终文本识别代码如下

  import { photoAccessHelper } from '@kit.MediaLibraryKit'  import { fileIo } from '@kit.CoreFileKit'  import { image } from '@kit.ImageKit'  import { textRecognition } from '@kit.CoreVisionKit'    @Entry  @Component  struct Index {    @State text: string = '识别结果'    @State imgPixelMap: PixelMap | null = null      build() {      Column({ space: 20 }) {        Button('打开图片')          .width('85%')          .onClick(async () => {            const uri = await this.selectPhoto()            if (uri) {              const pixelMap = await this.getPixMap(uri)              this.imgPixelMap = pixelMap            }          })          Button('开始识别')          .width('85%')          .onClick(() => {            this.recognize()          })          Image(this.imgPixelMap)          .objectFit(ImageFit.Contain)          .height('45%')          Text(this.text)          .width('85%')          .layoutWeight(1)          .border({ style: BorderStyle.Dotted, width: 5, color: Color.Red })      }      .width('100%')      .height('100%')    }      async selectPhoto() {      try {        // 实例化照片选择器        const picker = new photoAccessHelper.PhotoViewPicker()        // 选择图片        const uris = await picker.select({          MIMEType: photoAccessHelper.PhotoViewMIMETypes.IMAGE_TYPE,          maxSelectNumber: 1        })        return uris.photoUris[0]        } catch {        console.log('err')        return null      }    }      // 根据图片路径转PixelMap    async getPixMap(uri: string) {      try {        const imgSrc = await fileIo.open(uri, fileIo.OpenMode.READ_ONLY)        let source = image.createImageSource(imgSrc.fd)        return source.createPixelMapSync()      } catch {        console.log('error' + uri)        return null      }    }      // 文字识别    async recognize() {      const info: textRecognition.VisionInfo = {        pixelMap: this.imgPixelMap!      }      const res = await textRecognition.recognizeText(info, {        isDirectionDetectionSupported: false      })      this.text = res.value    }  }

复制代码

总结

今天猫林老师给大家分享了鸿蒙提供的原生 AI 能力。其实听起来名字很高大上，用起来非常简单。这是因为鸿蒙帮我们做了高度封装，我们无须再关注 OCR 的相关知识，只需要使用鸿蒙提供的接口即可。所以，华为为了推广鸿蒙，发展鸿蒙生态，真的为开发者想了好多。这样的华为，你爱了吗？
友情提醒：本篇内容只适合用真机测试，模拟器无法出效果。
P.S：根据猫林老师肉测，在 API12 版本中的 Mac 模拟器成功出效果。其他版本都不行。所以建议有条件还是上真机。

发布于: 刚刚阅读数: 4

猫林老师

关注

还未添加个人签名 2024-12-06 加入

还未添加个人简介

发布

暂无评论

创作场景

鸿蒙 (HarmonyOS) 原生 AI 能力之文本识别

原生智能介绍

有哪些原生智能能力

基础视觉服务 - Core Vision Kit

文本识别介绍与使用

文本识别展示案例

总结

猫林老师

评论