HarmonyOS 鸿蒙Next图片文字识别OCR功能如何实现？文字提取开发指南

解决方案

1. 完整实现代码

import { textRecognition } from '@kit.CoreVisionKit'
import { picker } from '@kit.CoreFileKit'
import { image } from '@kit.ImageKit'
import { BusinessError } from '@kit.BasicServicesKit'
import { fileIo } from '@kit.CoreFileKit'

@Entry
@Component
struct OCRPage {
  @State recognizedText: string = ''
  @State selectedImage: string = ''
  @State isRecognizing: boolean = false
  @State statusText: string = '请选择图片'

  // 选择图片
  async selectImage(): Promise<void> {
    try {
      const photoPicker = new picker.PhotoViewPicker()
      const result = await photoPicker.select({
        MIMEType: picker.PhotoViewMIMETypes.IMAGE_TYPE,
        maxSelectNumber: 1
      })
     
      if (result.photoUris.length > 0) {
        this.selectedImage = result.photoUris[0]
        this.statusText = '图片已选择，点击识别'
        this.recognizedText = ''
      }
    } catch (err) {
      console.error('选择图片失败:', err)
    }
  }

  // 执行OCR识别
  async recognizeText(): Promise<void> {
    if (!this.selectedImage) {
      this.statusText = '请先选择图片'
      return
    }
   
    this.isRecognizing = true
    this.statusText = '正在识别...'
   
    try {
      // 读取图片文件
      const file = fileIo.openSync(this.selectedImage, fileIo.OpenMode.READ_ONLY)
      const imageSource = image.createImageSource(file.fd)
      const pixelMap = await imageSource.createPixelMap()
      fileIo.closeSync(file)
     
      // 配置识别参数
      const visionInfo: textRecognition.VisionInfo = {
        pixelMap: pixelMap
      }
     
      const textConfiguration: textRecognition.TextRecognitionConfiguration = {
        isDirectionDetectionSupported: true  // 支持方向检测
      }
     
      // 执行识别
      const result = await textRecognition.recognizeText(visionInfo, textConfiguration)
     
      // 处理识别结果
      if (result && result.value) {
        this.recognizedText = result.value
        this.statusText = '识别完成'
      } else {
        this.recognizedText = '未识别到文字'
        this.statusText = '识别完成（无结果）'
      }
     
      // 释放资源
      pixelMap.release()
     
    } catch (err) {
      const error = err as BusinessError
      console.error(`OCR识别失败: ${error.code} - ${error.message}`)
      this.statusText = '识别失败'
      this.recognizedText = ''
    } finally {
      this.isRecognizing = false
    }
  }

  build() {
    Column({ space: 16 }) {
      // 状态显示
      Text(this.statusText)
        .fontSize(14)
        .fontColor($r('app.color.text_secondary'))
     
      // 图片预览
      if (this.selectedImage) {
        Image(this.selectedImage)
          .width('100%')
          .height(200)
          .objectFit(ImageFit.Contain)
          .backgroundColor($r('app.color.surface'))
          .borderRadius(12)
      } else {
        Column() {
          Image($r('app.media.ic_image'))
            .width(48)
            .height(48)
            .fillColor($r('app.color.text_secondary'))
          Text('点击选择图片')
            .fontSize(14)
            .fontColor($r('app.color.text_secondary'))
            .margin({ top: 8 })
        }
        .width('100%')
        .height(200)
        .backgroundColor($r('app.color.surface'))
        .borderRadius(12)
        .justifyContent(FlexAlign.Center)
        .onClick(() => this.selectImage())
      }
     
      // 操作按钮
      Row({ space: 12 }) {
        Button('选择图片')
          .layoutWeight(1)
          .height(44)
          .backgroundColor($r('app.color.surface'))
          .fontColor($r('app.color.primary'))
          .onClick(() => this.selectImage())
       
        Button(this.isRecognizing ? '识别中...' : '开始识别')
          .layoutWeight(1)
          .height(44)
          .backgroundColor('#36e27b')
          .enabled(!this.isRecognizing && !!this.selectedImage)
          .onClick(() => this.recognizeText())
      }
      .width('100%')
     
      // 识别结果
      Column() {
        Text('识别结果')
          .fontSize(16)
          .fontWeight(FontWeight.Bold)
          .fontColor($r('app.color.text_primary'))
          .width('100%')
       
        Scroll() {
          Text(this.recognizedText || '识别结果将显示在这里')
            .fontSize(14)
            .fontColor($r('app.color.text_primary'))
            .width('100%')
        }
        .layoutWeight(1)
        .margin({ top: 12 })
      }
      .layoutWeight(1)
      .padding(16)
      .backgroundColor($r('app.color.surface'))
      .borderRadius(12)
    }
    .width('100%')
    .height('100%')
    .padding(16)
    .backgroundColor($r('app.color.background'))
  }
}

2. 获取详细识别信息

// 获取每个文字块的详细信息
async recognizeTextWithDetails(): Promise<void> {
  // ... 前面的图片读取代码相同

  const result = await textRecognition.recognizeText(visionInfo, textConfiguration)

  if (result && result.textBlocks) {
    let fullText = ''
   
    result.textBlocks.forEach((block, blockIndex) => {
      console.info(`文字块 ${blockIndex}:`)
      console.info(`  内容: ${block.value}`)
      console.info(`  置信度: ${block.confidence}`)
      console.info(`  边界框: ${JSON.stringify(block.boundingBox)}`)
     
      fullText += block.value + '\n'
    })
   
    this.recognizedText = fullText
  }
}

3. 识别配置参数

const textConfiguration: textRecognition.TextRecognitionConfiguration = {
  isDirectionDetectionSupported: true,  // 支持文字方向检测
}

4. 从相机拍照识别

import { camera } from '@kit.CameraKit'

// 拍照后识别
async captureAndRecognize(): Promise<void> {
  // 使用相机拍照获取图片
  const cameraPicker = new picker.PhotoViewPicker()
  // ... 相机拍照逻辑

  // 然后调用 recognizeText 进行识别
}