HarmonyOS 鸿蒙Next中实现文字识别识别

背景

随着科技的发展，手机也被开发出更多能力来对日常的生活和工作进行辅助，多种多样的能力正在被人们广泛关注及使用，不论是生产还是管理以及日常生活中，已处处可见AI能力的应用。在app开发中，AI输出输出能力也是必不可少的，他可以让生理缺陷的人也能更好的感受和使用科技，让不擅长手写或输入法输入的人群更加简便的在相应平台输入或者输出自己想实现的功能或者内容。

分析

在当下的大部分应用中，AI功能已经实现可以用在输入框、人机交互指令、视频、音频、按钮长按讲话、语音指令控制应用功能、拍照、视频、图片处理等领域，这都能大大方便生产和生活。那么如果想要在HarmoneyOS 中实现文字识别的能力，有需要怎么去实现呢？

大多数做过这些功能的同志都知道，去使用第三方的库，可那些库基本都是收费的，在harmonyOS中能实现这个功能吗？答案当然是肯定的，OCR文字识别能力在别的平台上可能需要集成第三方SDK，而且还要支付昂贵的费用，但是在HarmoneyOS 中已经集成到api中，而且还是免费的！！！

开发准备

那我们开始实现关于图片的OCR文字识别，要想实现HarmoneyOS 中的文字识别，我们首先需要有一个数据源，数据源就简单的用键盘敲打几个字，然后实现功能之后，我们来看看OCR能否正确识别我们书写的文字，准备好扫描的文字接下来我们开始实现相应的代码

功能实现

文字识别属于Core Vision Kit（基础视觉服务），使用此功能不仅仅只是识别书写的文字，还可用于扫描和识别文档、名片、票据等印刷品中的文字内容，方便用户快速录入和存储信息。

1.首先需要在page页面头部导入相应的依赖包

import { textRecognition } from '@kit.CoreVisionKit';

这下我们就可以在页面中使用相应的api了

1. 获取数据源，创建拿到图片、识别图片内容的方法，方便我们在ui组件中调用

private async selectImage() {

    let uri = await this.openPhoto();

    if (uri === undefined) {

      hilog.error(0x0000, 'OCRDemo', "Failed to get uri.");

      return;

    }

    this.loadImage(uri);

  }

  private openPhoto(): Promise<string> {

    return new Promise<string>((resolve) => {

      let photoPicker = new picker.PhotoViewPicker();

      photoPicker.select({

        MIMEType: picker.PhotoViewMIMETypes.IMAGE_TYPE,

        maxSelectNumber: 1

      }).then((res: picker.PhotoSelectResult) => {

        resolve(res.photoUris[0]);

      }).catch((err: BusinessError) => {

        hilog.error(0x0000, 'OCRDemo', `Failed to get photo image uri. Code：${err.code}，message：${err.message}`);

        resolve('');

      })

    })

  }

  private loadImage(name: string) {

    setTimeout(async () => {

      let fileSource = await fileIo.open(name, fileIo.OpenMode.READ_ONLY);

      this.imageSource = image.createImageSource(fileSource.fd);

      this.chooseImage = await this.imageSource.createPixelMap();

    }, 100)

  }

}

 private textRecognitionTest() {

    if (!this.chooseImage) {

      return;

    }

    let visionInfo: textRecognition.VisionInfo = {

      pixelMap: this.chooseImage

    };

    let textConfiguration: textRecognition.TextRecognitionConfiguration = {

      isDirectionDetectionSupported: false

    };

    textRecognition.recognizeText(visionInfo, textConfiguration)

      .then((data: textRecognition.TextRecognitionResult) => {

        let recognitionString = JSON.stringify(data);

        hilog.info(0x0000, 'OCRDemo', `Succeeded in recognizing text：${recognitionString}`);

        this.dataValues = data.value;

        if(this.chooseImage && this.imageSource) {

          this.chooseImage.release();

          this.imageSource.release();

        }

      })

      .catch((error: BusinessError) => {

        hilog.error(0x0000, 'OCRDemo', `Failed to recognize text. Code: ${error.code}, message: ${error.message}`);

        this.dataValues = `Error: ${error.message}`;

      });

  }

1. 通过ui组件调用方法，展示数据源

我们在页面上创建相对应的ui组件，分别需要显示图片、识别的文字、选择图片按钮、识别图片按钮，并且绑定创建的方法

  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.textRecognitionTest();

        })

      Image(this.chooseImage)

        .objectFit(ImageFit.Fill)

        .height('60%')

      Text("文字识别结果为："+this.dataValues)

        .copyOption(CopyOptions.LocalDevice)

        .height('15%')

        .margin(10)

        .width('60%')

这时候我们执行代码，就可以实现文字的识别扫描了，不管是识别速度，准确度，跟其他第三方收费的是一样的