华为HarmonyOS 快速构建各种文本识别应用 -- 通用文字识别

青瓷看世界2024-12-07 15:33

适用场景

通用文字识别，是通过拍照、扫描等光学输入方式，将各种票据、卡证、表格、报刊、书籍等印刷品文字转化为图像信息，再利用文字识别技术将图像信息转化为计算机等设备可以使用的字符信息的技术。

  • 可以对文档翻拍、街景翻拍等图片进行文字检测和识别，也可以集成于其他应用中，提供文字检测、识别的功能，并根据识别结果提供翻译、搜索等相关服务。
  • 可以处理来自相机、图库等多种来源的图像数据，提供一个自动检测文本、识别图像中文本位置以及文本内容功能的开放能力。
  • 支持特定角度范围内的文本倾斜、拍摄角度倾斜、复杂光照条件以及复杂文本背景等场景的文字识别。

开发步骤

  1. 在使用通用文字识别时，将实现文字识别的相关的类添加至工程。

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

  2. 简单配置页面的布局，并在Button组件添加点击事件，拉起图库，选择图片。

    复制代码
    1. Button('选择图片')
    2. .type(ButtonType.Capsule)
    3. .fontColor(Color.White)
    4. .alignSelf(ItemAlign.Center)
    5. .width('80%')
    6. .margin(10)
    7. .onClick(() => {
    8. // 拉起图库，获取图片资源
    9. this.selectImage();
    10. })

  3. 通过图库获取图片资源，将图片转换为PixelMap，并添加初始化和释放方法。

    复制代码
    1. async aboutToAppear(): Promise<void> {
    2. const initResult = await textRecognition.init();
    3. hilog.info(0x0000, 'OCRDemo', `OCR service initialization result:${initResult}`);
    4. }
    6. async aboutToDisappear(): Promise<void> {
    7. await textRecognition.release();
    8. hilog.info(0x0000, 'OCRDemo', 'OCR service released successfully');
    9. }
    11. private async selectImage() {
    12. let uri = await this.openPhoto();
    13. if (uri === undefined) {
    14. hilog.error(0x0000, 'OCRDemo', "Failed to get uri.");
    15. return;
    16. }
    17. this.loadImage(uri);
    18. }
    20. private openPhoto(): Promise<string> {
    21. return new Promise<string>((resolve) => {
    22. let photoPicker: photoAccessHelper.PhotoViewPicker = new photoAccessHelper.PhotoViewPicker();
    23. photoPicker.select({
    24. MIMEType: photoAccessHelper.PhotoViewMIMETypes.IMAGE_TYPE,
    25. maxSelectNumber: 1
    26. }).then((res: photoAccessHelper.PhotoSelectResult) => {
    27. resolve(res.photoUris[0]);
    28. }).catch((err: BusinessError) => {
    29. hilog.error(0x0000, 'OCRDemo', `Failed to get photo image uri. code：{err.code}，message：{err.message}`);
    30. resolve('');
    31. })
    32. })
    33. }
    35. private loadImage(name: string) {
    36. setTimeout(async () => {
    37. let imageSource: image.ImageSource | undefined = undefined;
    38. let fileSource = await fileIo.open(name, fileIo.OpenMode.READ_ONLY);
    39. imageSource = image.createImageSource(fileSource.fd);
    40. this.chooseImage = await imageSource.createPixelMap();
    41. }, 100)
    42. }

  4. 实例化VisionInfo对象，并传入待检测图片的PixelMap。

    VisionInfo为待OCR检测识别的入参项，目前仅支持PixelMap类型的视觉信息。

    复制代码
    1. let visionInfo: textRecognition.VisionInfo = {
    2. pixelMap: this.chooseImage
    3. };

  5. 配置通用文本识别的配置项TextRecognitionConfiguration，用于配置是否支持朝向检测。

    复制代码
    1. let textConfiguration: textRecognition.TextRecognitionConfiguration = {
    2. isDirectionDetectionSupported: false
    3. };

  6. 调用textRecognition的recognizeText接口，对识别到的结果进行处理。

    当调用成功时，获取文字识别的结果；调用失败时，将返回对应错误码。
    recognizeText接口提供了三种调用形式，当前以其中一种作为示例，其他方式可参考API文档。

    复制代码
    1. textRecognition.recognizeText(visionInfo, textConfiguration)
    2. .then((data: textRecognition.TextRecognitionResult) => {
    3. // 识别成功，获取对应的结果
    4. let recognitionString = JSON.stringify(data);
    5. hilog.info(0x0000, 'OCRDemo', `Succeeded in recognizing text：${recognitionString}`);
    6. // 将结果更新到Text中显示
    7. this.dataValues = data.value;
    8. })
    9. .catch((error: BusinessError) => {
    10. hilog.error(0x0000, 'OCRDemo', `Failed to recognize text. Code: ${error.code}, message: ${error.message}`);
    11. this.dataValues = `Error: ${error.message}`;
    12. });

开发实例

点击按钮，识别一张图片的文字内容，并通过日志打印。

复制代码
  1. import { textRecognition } from '@kit.CoreVisionKit'
  2. import { image } from '@kit.ImageKit';
  3. import { hilog } from '@kit.PerformanceAnalysisKit';
  4. import { BusinessError } from '@kit.BasicServicesKit';
  5. import { fileIo } from '@kit.CoreFileKit';
  6. import { photoAccessHelper } from '@kit.MediaLibraryKit';
  8. @Entry
  9. @Component
  10. struct Index {
  11. private imageSource: image.ImageSource | undefined = undefined;
  12. @State chooseImage: PixelMap | undefined = undefined;
  13. @State dataValues: string = '';
  15. async aboutToAppear(): Promise<void> {
  16. const initResult = await textRecognition.init();
  17. hilog.info(0x0000, 'OCRDemo', `OCR service initialization result:${initResult}`);
  18. }
  20. async aboutToDisappear(): Promise<void> {
  21. await textRecognition.release();
  22. hilog.info(0x0000, 'OCRDemo', 'OCR service released successfully');
  23. }
  25. build() {
  26. Column() {
  27. Image(this.chooseImage)
  28. .objectFit(ImageFit.Fill)
  29. .height('60%')
  31. Text(this.dataValues)
  32. .copyOption(CopyOptions.LocalDevice)
  33. .height('15%')
  34. .margin(10)
  35. .width('60%')
  37. Button('选择图片')
  38. .type(ButtonType.Capsule)
  39. .fontColor(Color.White)
  40. .alignSelf(ItemAlign.Center)
  41. .width('80%')
  42. .margin(10)
  43. .onClick(() => {
  44. // 拉起图库，获取图片资源
  45. this.selectImage();
  46. })
  48. Button('开始识别')
  49. .type(ButtonType.Capsule)
  50. .fontColor(Color.White)
  51. .alignSelf(ItemAlign.Center)
  52. .width('80%')
  53. .margin(10)
  54. .onClick(async () => {
  55. this.textRecognitionTest();
  56. })
  57. }
  58. .width('100%')
  59. .height('100%')
  60. .justifyContent(FlexAlign.Center)
  61. }
  63. private textRecognitionTest() {
  64. if (!this.chooseImage) {
  65. return;
  66. }
  67. // 调用文本识别接口
  68. let visionInfo: textRecognition.VisionInfo = {
  69. pixelMap: this.chooseImage
  70. };
  71. let textConfiguration: textRecognition.TextRecognitionConfiguration = {
  72. isDirectionDetectionSupported: false
  73. };
  74. textRecognition.recognizeText(visionInfo, textConfiguration)
  75. .then((data: textRecognition.TextRecognitionResult) => {
  76. // 识别成功，获取对应的结果
  77. let recognitionString = JSON.stringify(data);
  78. hilog.info(0x0000, 'OCRDemo', `Succeeded in recognizing text：${recognitionString}`);
  79. // 将结果更新到Text中显示
  80. this.dataValues = data.value;
  81. })
  82. .catch((error: BusinessError) => {
  83. hilog.error(0x0000, 'OCRDemo', `Failed to recognize text. Code: ${error.code}, message: ${error.message}`);
  84. this.dataValues = `Error: ${error.message}`;
  85. });
  86. }
  88. private async selectImage() {
  89. let uri = await this.openPhoto();
  90. if (uri === undefined) {
  91. hilog.error(0x0000, 'OCRDemo', "Failed to get uri.");
  92. return;
  93. }
  94. this.loadImage(uri);
  95. }
  97. private openPhoto(): Promise<string> {
  98. return new Promise<string>((resolve) => {
  99. let photoPicker: photoAccessHelper.PhotoViewPicker = new photoAccessHelper.PhotoViewPicker();
  100. photoPicker.select({
  101. MIMEType: photoAccessHelper.PhotoViewMIMETypes.IMAGE_TYPE,
  102. maxSelectNumber: 1
  103. }).then((res: photoAccessHelper.PhotoSelectResult) => {
  104. resolve(res.photoUris[0]);
  105. }).catch((err: BusinessError) => {
  106. hilog.error(0x0000, 'OCRDemo', `Failed to get photo image uri. Code：{err.code}，message：{err.message}`);
  107. resolve('');
  108. })
  109. })
  110. }
  112. private loadImage(name: string) {
  113. setTimeout(async () => {
  114. let fileSource = await fileIo.open(name, fileIo.OpenMode.READ_ONLY);
  115. this.imageSource = image.createImageSource(fileSource.fd);
  116. this.chooseImage = await this.imageSource.createPixelMap();
  117. }, 100)
  118. }
  119. }
相关推荐
鸿蒙开天组●1 小时前
鸿蒙实战篇-解决报错提示“code:9568305 error: dependent module does not exist”
华为·编辑器·harmonyos·鸿蒙
SuperHeroWu74 小时前
【HarmonyOS Next】拒绝权限二次申请授权处理
华为·harmonyos·授权·设置·弹框·二次申请权限·拒绝权限
m0_748232644 小时前
鸿蒙NEXT（五）：鸿蒙版React Native架构浅析
react native·架构·harmonyos
东林知识库5 小时前
鸿蒙NEXT应用App测试-通用测试
华为·harmonyos
二川bro5 小时前
HarmonyOS Design 介绍
华为·harmonyos
码上为赢5 小时前
【DeepSeek与鸿蒙HarmonyOS：开启应用开发新次元】
华为·harmonyos·deepseek
Jack_Wee6 小时前
解锁鸿蒙装饰器：应用、原理与优势全解析
harmonyos
skywalk81637 小时前
PolyOS 是面向 RISC-V 架构的智能终端和 AIoT 开源操作系统（基于开源鸿蒙）
qemu·harmonyos·risc-v
二川bro7 小时前
HarmonyOS 开发套件 介绍——下篇
华为·harmonyos
繁依Fanyi8 小时前
巧妙实现右键菜单功能，提升用户操作体验
开发语言·前端·javascript·vue.js·uni-app·harmonyos
热门推荐
01DeepSeek各版本说明与优缺点分析02如何在WPS和Word/Excel中直接使用DeepSeek功能03DeepSeek本地部署详细指南04太炸裂了！清华大学deepseek从入门到精通使用手册又出第三版了，《普通人如何抓住DeepSeek红利》（无套路，直接下载）05本地部署DeepSeek教程（Mac版本）06DeepSeek r1本地安装全指南07DeepSeek R1本地化部署 Ollama + Chatbox 打造最强 AI 工具08本地化部署AI知识库：基于Ollama+DeepSeek+AnythingLLM保姆级教程09在Windows下安装Ollama并体验DeepSeek r1大模型10DeepSeek RAGFlow构建本地知识库系统