03-HarmonyOS5-TextRecognition-Case

Case Description

This is a text recognition case implemented based on AI basic vision services. It captures photos through the device camera and then recognizes the text content in the images.

Implementation Steps:

1. Module Import

// Import functional modules
import { camera, cameraPicker } from '@kit.CameraKit';
import { fileIo } from '@kit.CoreFileKit';
import image from '@ohos.multimedia.image';
import { textRecognition } from '@kit.CoreVisionKit';

2. Camera Call and Image Acquisition

// Create a camera picker instance
const res = await cameraPicker.pick(getContext(), [
  cameraPicker.PickerMediaType.PHOTO
], {
  cameraPosition: camera.CameraPosition.CAMERA_POSITION_BACK
});

// Get the URI of the captured image
const imageUri = res.resultUri;

3. Image Processing Flow

// Convert the image to a recognizable pixel map
const fileSource = await fileIo.open(imageUri, fileIo.OpenMode.READ_ONLY);
const imageSource = image.createImageSource(fileSource.fd);
const pixelMap = await imageSource.createPixelMap();

4. Core Implementation of Text Recognition

// Configure visual recognition parameters
let visionInfo: textRecognition.VisionInfo = {
  pixelMap: pixelMap
};

// Execute text recognition and get the result
const recognitionResult = await textRecognition.recognizeText(visionInfo);
this.text = recognitionResult.value;

5. Interface Construction and Interaction

@Entry
@Component
struct TextRecognition {
  @State text: string = '';

  // Button click event handler
  async openCamera() {
    // Integrate the complete call logic of the above steps
  }

  build() {
    Column() {
      Button('Take Photo and Recognize Text')
        .onClick(() => this.openCamera())

      Text(this.text)
        .fontSize(20)
        .margin(10)
    }
    .padding(20)
  }
}

2. Complete Business Logic

Integrate the complete call flow of each functional module.

Summary:

Key Points

1. Camera calls require device permissions and hardware support.
2. Image conversion ensures compatibility with different image formats.
3. The text recognition interface returns structured recognition results.

Complete Code

// Keep the original code intact and only add explanatory comments
import { camera, cameraPicker } from '@kit.CameraKit';
import { fileIo } from '@kit.CoreFileKit';
import image from '@ohos.multimedia.image';
import { textRecognition } from '@kit.CoreVisionKit';

@Entry
@Component
struct TextRecognition {
  @State text: string = '';

  // Main function method: integrate camera call and text recognition
  async openCamera() {
    // Step 1: Call the camera to take a photo
    const res = await cameraPicker.pick(getContext(), [cameraPicker.PickerMediaType.PHOTO], {
      cameraPosition: camera.CameraPosition.CAMERA_POSITION_BACK
    })

    // Step 2: Check the availability of OCR capabilities
    // Use the canIUse interface to detect whether the device supports text recognition capabilities
    if (canIUse('SystemCapability.AI.OCR.TextRecognition')) {
      // Step 3: Process the image file
      const fileSource = await fileIo.open(res.resultUri, fileIo.OpenMode.READ_ONLY);
      const imageSource = image.createImageSource(fileSource.fd);
      const chooseImage = await imageSource.createPixelMap();

      // Step 4: Execute text recognition
      let visionInfo: textRecognition.VisionInfo = {
        pixelMap: chooseImage
      };
      const data = await textRecognition.recognizeText(visionInfo);

      // Update the recognition result to the interface
      this.text = data.value
    }
  }

  // UI layout
  build() {
    Column() {
      Button('Take Photo and Recognize Text')
        .onClick(() => {
          this.openCamera()
        })

      Text(this.text)
        .fontSize(20)
        .margin(10)
    }
    .height('100%')
    .width('100%')
  }
}