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

原生智能介绍

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

有哪些原生智能能力

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

基础视觉服务 - Core Vision Kit

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

文本识别介绍与使用

概念：将图片中的文字给识别出来
使用 textRecognition 实现文本识别
限制：
- 仅能识别5种语言类型
  - 简体中文、繁体中文、英文、日文、韩文
使用步骤
1. 导入textRecognition
```
import { textRecognition } from **********'
```
2. 实例化visionInfo对象，用来准备待识别的图片（需PixelMap类型）
```
let visionInfo: textRecognition.VisionInfo = {
    pixelMap: '待识别图片'
};
```
3. 实例化TextRecognitionConfiguration对象，设置识别配置（目前仅有是否开启朝向检测一项配置）
```
let textConfiguration: textRecognition.TextRecognitionConfiguration = {
  	// 是否开启朝向检测
    isDirectionDetectionSupported: false
};
```
4. 调用textRecognition的recognizeText接口传入以上两个对象，开启识别并对识别结果进行处理，得到的是TextRecognitionResult类型结果，这个对象的value属性即为识别结果
```
textRecognition.recognizeText(visionInfo, textConfiguration)
```
这里解释一下这几步
- 你需要用textRecognition，所以需要先找到它，也即导入，这没什么好说的
- 你需要用它来帮你识别图片，那你是不是应该把需要识别的图片给它？所以第一个参数就是给他传递一个图片，只不过这个图片只能传PixelMap类型的（这就是为什么上篇我要写PixMap的原因），但是这个图片不能直接传，要包装成VisionInfo类型的对象（虽然目前为止，这个对象只有这一个属性，但保不齐未来会加）
  
  然后就是设置一下它识别的相关参数，它目前也只有一个参数，叫isDirectionDetectionSupported，设置是否开启朝向检测，因为有的图片可能是正的，有的图片可能是反的斜的。所以对于反的斜的图片如果这项开启为true，则会检测的更为准确。但是经过猫林老师肉测，其实开不开启扫描反的斜的图片，得到的结果都差不多了。所以可以看自己选择。顺便一提，这个参数可以不传，不传默认是true。然后猫林老师觉得：未来随着API发展，可能会多一些参数也说不准
- 最后即为调用其进行识别的方法，也即recognizeText开始识别
- 根据上面所说的，其实上面说的四步，也可以极简改为两步，代码如下
```
import { textRecognition } from **********'

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 **********'
import { fileIo } from **********'
import { image } from **********'
import { textRecognition } from **********'

@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模拟器成功出效果。其他版本都不行。所以建议有条件还是上真机。

#牛客创作赏金赛##前端#