指令魔方的 “图文转文字” 黑科技：鸿蒙 OCR 通用文字识别实战

鸿蒙的通用文字识别能力上手特别简单，核心就是 “初始化 -> 选图 -> 转格式 -> 调用接口”，代码逻辑很固定，复制上面的代码，改改按钮文字、调整一下布局，就能集成到自己的 APP 里。拍照识别：在 “选择图片” 之外，加一个 “拍照” 按钮，调用相机实时拍照后直接识别；文字编辑：识别后允许用户修改文本，比如纠正少量识别错误；功能联动：像指令魔方一样，把识别后的文字和 APP 的核心功能联动，

程序猿直通车

59人浏览 · 2026-01-26 05:15:48

程序猿直通车 · 2026-01-26 05:15:48 发布

大家好，我是陈杨，8 年前端老兵转型鸿蒙开发，也是一名鸿蒙极客。从前端到鸿蒙，我靠的是 “三天上手 ArkTS” 的技术嗅觉，以及 “居安思危” 的转型魄力。这三年，我不玩虚的，封装了开源组件库「莓创图表」，拿过创新赛大奖，更带着团队上架了 11 款自研 APP，涵盖工具、效率、创意等多个领域。想体验我的作品？欢迎搜索体验：指令魔方、JLPT、REFLEX PRO、国潮纸刻、Wss 直连、ZenithDocs Pro、圣诞相册、CSS 特效。

在指令魔方 APP 里，有个超实用的功能：用户拍下纸质文档、票据或者截图，APP 能自动提取里面的文字，直接生成可编辑的指令。比如拍下打印的待办清单，一键识别后就能转换成 APP 里的执行指令，不用手动打字。这个 “图文转文字” 的黑科技，核心就是鸿蒙 Core Vision Kit 里的通用文字识别能力（OCR）。今天就带大家一步步拆解，用通俗的语言和可复用的代码，教你快速落地这个功能。

一、先搞懂：鸿蒙 OCR 到底能做啥？

简单说，鸿蒙的通用文字识别就是 “让 APP 看懂图片里的字”—— 不管是相机拍的照片、图库存的截图，还是扫描的文档，它都能把里面的印刷体文字提取出来，变成可编辑的文本。

它的适用场景特别广，指令魔方里就用到了这些：

纸质指令电子化：用户拍下手写或印刷的指令清单，识别后直接导入 APP
票据信息提取：识别快递单、发票上的关键信息，生成对应的查询指令
截图文字提取：用户截下网页、聊天记录里的文字，识别后快速创建指令

而且它很抗造，图片有点倾斜（比如拍照时没拍正）、光线不好（比如在昏暗的房间里拍），或者背景复杂（比如文字在花纹纸上），都能准确识别。不过要注意，目前这个能力不支持模拟器，开发时得用真实设备测试。

二、核心逻辑：从 “选图” 到 “识别” 的 4 步走

想实现图片文字识别，流程其实很清晰，就 4 个关键步骤，指令魔方也是这么做的：

初始化 OCR 服务：打开识别功能的 “开关”，准备好识别所需的资源
选择图片：让用户从图库选图，或者直接拍照（本文以图库选图为例）
图片格式转换：把选中的图片转换成 OCR 能识别的 PixelMap 格式
调用识别接口：传入图片，等待识别结果，最后显示在页面上

三、实现代码

// 导入需要的工具包
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';

@Entry
@Component
struct OcrTextExtractor {
  // 选中的图片（PixelMap格式，OCR只能识别这种格式）
  @State selectedImage: PixelMap | undefined = undefined;
  // 识别后的文字结果
  @State recognizedText: string = "识别结果会显示在这里...";
  // 图片资源对象
  private imageSource: image.ImageSource | undefined = undefined;

  // 第一步：页面加载时初始化OCR服务
  async aboutToAppear(): Promise<void> {
    const initResult = await textRecognition.init();
    hilog.info(0x0000, 'OcrDemo', `OCR服务初始化结果：${initResult}`);
  }

  // 页面销毁时释放OCR资源（避免占用内存）
  async aboutToDisappear(): Promise<void> {
    await textRecognition.release();
    hilog.info(0x0000, 'OcrDemo', 'OCR服务已释放');
  }

  build() {
    Column({ space: 20 }) {
      // 显示选中的图片
      Image(this.selectedImage)
        .objectFit(ImageFit.Contain) // 保持图片比例
        .height('50%')
        .width('90%')
        .border({ width: 2, color: 0x317AE7, radius: 8 })
        .backgroundColor('#F5F5F5')

      // 显示识别结果（支持复制）
      TextArea({
        placeholder: '识别结果会显示在这里...',
        text: this.recognizedText
      })
      .width('90%')
      .height('20%')
      .border({ width: 2, color: 0x317AE7, radius: 8 })
      .copyOption(CopyOptions.LocalDevice) // 允许本地复制

      // 选择图片按钮
      Button('从图库选择图片')
        .type(ButtonType.Capsule)
        .backgroundColor(0x317AE7)
        .fontColor(Color.White)
        .width('90%')
        .height(45)
        .onClick(() => this.selectImageFromGallery())

      // 开始识别按钮
      Button('开始提取文字')
        .type(ButtonType.Capsule)
        .backgroundColor(0x317AE7)
        .fontColor(Color.White)
        .width('90%')
        .height(45)
        .onClick(() => this.startTextRecognition())
    }
    .padding(20)
    .width('100%')
    .height('100%')
    .justifyContent(FlexAlign.Center)
  }

  // 第二步：从图库选择图片
  private async selectImageFromGallery() {
    // 调用系统图库
    const photoPicker = new photoAccessHelper.PhotoViewPicker();
    try {
      const selectResult = await photoPicker.select({
        MIMEType: photoAccessHelper.PhotoViewMIMETypes.IMAGE_TYPE, // 只选图片
        maxSelectNumber: 1 // 最多选1张
      });
      const imageUri = selectResult.photoUris[0]; // 获取选中图片的URI
      if (imageUri) {
        await this.loadImageToPixelMap(imageUri); // 转换图片格式
      }
    } catch (err: BusinessError | any) {
      hilog.error(0x0000, 'OcrDemo', `选图失败：${err.message}`);
      this.recognizedText = `选图失败：${err.message}`;
    }
  }

  // 第三步：将图片转换为OCR能识别的PixelMap格式
  private async loadImageToPixelMap(uri: string) {
    try {
      // 打开图片文件
      const file = await fileIo.open(uri, fileIo.OpenMode.READ_ONLY);
      // 创建图片资源对象
      this.imageSource = image.createImageSource(file.fd);
      // 转换为PixelMap格式
      this.selectedImage = await this.imageSource.createPixelMap();
      // 重置识别结果
      this.recognizedText = "已选中图片，点击「开始提取文字」按钮...";
    } catch (err: BusinessError | any) {
      hilog.error(0x0000, 'OcrDemo', `图片加载失败：${err.message}`);
      this.recognizedText = `图片加载失败：${err.message}`;
    }
  }

  // 第四步：调用OCR接口，提取图片中的文字
  private startTextRecognition() {
    // 先判断是否选中了图片
    if (!this.selectedImage) {
      this.recognizedText = "请先选择一张图片！";
      return;
    }

    // 配置识别参数：是否支持朝向检测（这里关闭，按需开启）
    const recognitionConfig: textRecognition.TextRecognitionConfiguration = {
      isDirectionDetectionSupported: false
    };

    // 传入图片和配置，调用识别接口
    textRecognition.recognizeText(
      { pixelMap: this.selectedImage }, // 待识别的图片
      recognitionConfig
    )
    .then((result: textRecognition.TextRecognitionResult) => {
      // 识别成功，显示结果
      this.recognizedText = result.value || "未识别到文字";
      hilog.info(0x0000, 'OcrDemo', `识别成功：${result.value}`);
    })
    .catch((error: BusinessError) => {
      // 识别失败，显示错误信息
      this.recognizedText = `识别失败：${error.message}（错误码：${error.code}）`;
      hilog.error(0x0000, 'OcrDemo', `识别失败：${error.message}，错误码：${error.code}`);
    });
  }
}