[中工开发者]使用华为鸿蒙OS构建图片文字识别应用

图片选择：用户可以从设备的图库中选择一张图片。文字识别：选择图片后，应用通过OCR服务提取图片中的文字。结果展示：提取到的文字会显示在界面上。

看破亡尘

1013人浏览 · 2024-12-06 16:35:51

看破亡尘 · 2024-12-06 16:35:51 发布

在本文中，我们将通过构建一个简单的图片文字识别应用来介绍如何使用华为鸿蒙OS的Core Vision Kit。该应用可以让用户选择一张图片，并通过光学字符识别（OCR）提取图片中的文本。我们将逐步解析代码，并解释每个部分的功能。

前提条件：

安装华为鸿蒙OS SDK
具备鸿蒙OS开发和UI组件的基础知识

应用概述

该应用包含以下主要功能：

图片选择：用户可以从设备的图库中选择一张图片。
文字识别：选择图片后，应用通过OCR服务提取图片中的文字。
结果展示：提取到的文字会显示在界面上。

项目设置

首先，我们引入华为鸿蒙OS SDK中的必要模块：

import { textRecognition } from '@kit.CoreVisionKit'
import { image } from '@kit.ImageKit';
import { hilog } from '@kit.PerformanceAnalysisKit';
import { BusinessError } from '@kit.BasicServicesKit';
import { fileIo } from '@kit.CoreFileKit';
import { photoAccessHelper } from '@kit.MediaLibraryKit';

这些模块提供了图像处理、OCR、日志记录、文件I/O和媒体库访问等功能。

关键功能

OCR初始化与清理 当应用即将显示时，初始化OCR服务：

async aboutToAppear(): Promise<void> {
  const initResult = await textRecognition.init();
  hilog.info(0x0000, 'textRecognitionSample', `OCR服务初始化结果:${initResult}`);
}

async aboutToDisappear(): Promise<void> {
  await textRecognition.release();
  hilog.info(0x0000, 'textRecognitionSample', 'OCR服务已成功释放');
}

aboutToAppear函数用于初始化OCR服务，而aboutToDisappear函数在应用不再显示时清理资源。

图片选择 应用允许用户使用selectImage()方法从图库中选择图片：

private async selectImage() {
  let uri = await this.openPhoto();
  if (uri === undefined) {
    hilog.error(0x0000, 'OCRDemo', "获取URI失败。");
    return;
  }
  this.loadImage(uri);
}

openPhoto()方法使用photoAccessHelper打开图库选择图片，loadImage()加载选中的图片。

文字识别 用户选择图片后，应用会触发OCR识别：

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', `成功识别文字：${recognitionString}`);
      this.dataValues = data.value;
    })
    .catch((error: BusinessError) => {
      hilog.error(0x0000, 'OCRDemo', `识别文字失败。错误码: ${error.code}, 错误信息: ${error.message}`);
      this.dataValues = `错误: ${error.message}`;
    });
}

该函数使用textRecognition.recognizeText方法处理选中的图片，并提取其中的文字。如果OCR过程成功，识别的文本将显示在UI中。

UI组件 应用使用华为鸿蒙OS的UI组件构建简单的界面，包括：图片预览：显示选中的图片。文本输出：展示识别的文字。按钮：用户选择图片和开始文字识别。

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

工作原理：

用户点击选择图片按钮，从图库中选择一张图片。
应用加载并显示图片预览。
用户点击开始识别按钮后，OCR服务开始处理图片并提取文字。
识别到的文字显示在文本框中。

错误处理：

如果OCR过程失败，应用会捕获错误并显示错误信息：

.catch((error: BusinessError) => {
  hilog.error(0x0000, 'OCRDemo', `识别文字失败。错误码: ${error.code}, 错误信息: ${error.message}`);
  this.dataValues = `错误: ${error.message}`;
});