头图

在完成语音助手项目后,我想试试其他的AI的API 13,于是我瞄上了——智能文本识别。通过研究HarmonyOS Next最新版本API 13中的Core Vision Text Recognition API,我深刻感受到了鸿蒙生态在计算机视觉领域的强大支持。该API能够快速将图像中的文本内容提取为结构化信息,官方给了足够的支持,也为开发者提供了丰富的应用场景。

图片

开始我的学习旅程

每次接触新的API,我都会抱着探索和学习的态度,了解其使用场景和核心功能。文本识别技术广泛应用于文档扫描、票据管理以及实时翻译等场景,因此我决定基于这一API开发一个支持文本识别与显示的应用,并记录下整个学习与开发过程。

第一步:理解Core Vision Text Recognition API的核心功能

核心功能简介

Core Vision Text Recognition API 提供了从图像中提取文本的能力,支持多语言高精度识别,其核心功能包括:

  • 文本区域检测:精准定位图像中的文本内容。
  • 多语言支持:包括简体中文、英文、日文、韩文和繁体中文。
  • 结构化结果输出:识别的结果以段落(TextBlock)、行(TextLine)和单词(TextWord)的形式返回。

应用场景

文档数字化:自动提取纸质文档内容并保存为可编辑文本。
票据管理:高效提取发票或收据信息以便整理。
实时翻译:通过识别图像中的文字实现动态翻译。

第二步:项目初始化与配置

在开发HarmonyOS应用时,权限配置是必不可少的步骤。

权限配置

在config.json文件中添加以下配置,确保应用拥有必要的权限:

{
  "module": {
    "abilities": [
      {
        "name": "TextRecognitionAbility",
        "permissions": [
          "ohos.permission.INTERNET",
          "ohos.permission.READ_MEDIA",
          "ohos.permission.WRITE_MEDIA"
        ]
      }
    ]
  }
}

第三步:实现文本识别功能

初始化Text Recognition服务

通过以下代码初始化文字识别服务:

import textRecognition from '@kit.CoreVisionKit';

let recognizerInstance = null;

async function initializeTextRecognition() {
    try {
        recognizerInstance = await textRecognition.init();
        console.info('文本识别服务初始化成功');
    } catch (error) {
        console.error('文本识别服务初始化失败:', error);
    }
}

initializeTextRecognition();

图像加载与识别

在图像识别过程中,我们首先加载待处理的图像,然后调用recognizeText接口提取文本信息。

async function recognizeTextFromImage(imageUri: string) {
    try {
        const visionInfo = { pixelMap: await loadPixelMap(imageUri) };
        const result = await textRecognition.recognizeText(visionInfo);

// 加长部分:
// 假设用户希望进一步定制识别行为,可以传递一个带有附加配置的对象来优化性能。例如:
const advancedConfig = { isDirectionDetectionSupported: false };
const advancedResult = await textRecognition.recognizeText(visionInfo, advancedConfig);
console.info('高级识别结果:', advancedResult);

// 此外,用户可以将结果导出到文件或进行进一步的处理
saveRecognitionResult(advancedResult);
function saveRecognitionResult(result) {
    console.info('结果已保存:', result.value);
    // 在这里可以实现将结果写入文件或数据库的逻辑
}

        console.info('识别结果:', result.value);
        result.blocks.forEach((block) => {
            console.info(`段落内容: ${block.value}`);
            block.lines.forEach((line) => {
                console.info(`  行内容: ${line.value}`);
                line.words.forEach((word) => {
                    console.info(`    单词: ${word.value}`);
                });
            });
        });
    } catch (error) {
        console.error('文本识别失败:', error);
    }
}

async function loadPixelMap(imageUri) {
    // 实现加载图像为PixelMap的逻辑
    return await someImageLibrary.loadPixelMap(imageUri);
}

const imagePath = '/data/media/sample_image.jpg';
recognizeTextFromImage(imagePath);

第四步:构建用户界面

为了让用户可以直观地体验文本识别功能,我设计了一个简单的界面,支持图像选择和识别结果的展示。

ArkUI界面实现

以下是界面的实现代码:

import { View, Text, Button, Image } from '@ohos.arkui';

export default View.create({
    build() {
        return (
            {
                type: "flex",
                flexDirection: "column",
                children: [
                    {
                        type: Text,
                        content: "文本识别应用",
                        style: { height: "50vp", fontSize: "20vp", textAlign: "center" },
                    },
                    {
                        type: Image,
                        src: this.imageUri || '',
                        style: { height: "200vp", width: "200vp", margin: "20vp" }
                    },
                    {
                        type: Button,
                        content: "选择图片",
                        style: { height: "50vp", marginTop: "20vp" },
                        onClick: this.onSelectImage
                    },
                    {
                        type: Button,
                        content: "识别文本",
                        style: { height: "50vp", marginTop: "10vp" },
                        onClick: this.onRecognizeText
                    }
                ]
            }
        );
    },

    onSelectImage() {
        // 模拟选择图片
        this.imageUri = '/data/media/sample_image.jpg';
        console.info('图片选择完成:', this.imageUri);
    },

    async onRecognizeText() {
        await recognizeTextFromImage(this.imageUri);
    }
});

第五步:性能优化与功能扩展

在项目开发过程中,我还探索了如何通过配置选项优化性能。例如,在不需要文字方向检测的情况下,可以通过以下方式禁用此功能以提升处理速度:

const configuration = { isDirectionDetectionSupported: false };
const result = await textRecognition.recognizeText(visionInfo, configuration);

此外,还可以扩展支持更多语言的功能,通过getSupportedLanguages接口获取当前支持的语言列表:

const languages = await textRecognition.getSupportedLanguages();
console.info('支持的语言列表:', languages);

最后的小总结

研究完HarmonyOS Next Core Vision Text Recognition API 13,还是很震撼的,之前非常难的东西目前也可以一个API就搞定了,特别舒服,同时也认识到了鸿蒙生态为开发者提供的便捷与强大。从服务的初始化到界面构建,再到性能优化,每一个步骤都让我感受到技术的魅力。

未来,我计划将这一技术应用于实际项目,例如开发票据管理工具或实时翻译应用。如果你也对文本识别感兴趣,不妨动手尝试,从简单的功能开始,逐步实现更复杂的需求!

当然如果你也在这一领域研究,不妨关注我,我们一起进步~!


李游Leo
5.9k 声望1.8k 粉丝

曾在百度、时趣互动、乐视等公司担任过高级前端(软件)开发工程师。后在北京一所当地大学任教,主要职务是教学主任,也为网易云课堂微专业的前端课程负责人。因为本身也是一名IT技术人员,所以非常关注网站制作...