จดจำข้อความในรูปภาพด้วย ML Kit บน iOS

คุณสามารถใช้ ML Kit เพื่อจดจำข้อความในรูปภาพหรือวิดีโอ เช่น ข้อความในป้ายจราจรบนท้องถนน ลักษณะสำคัญของฟีเจอร์นี้มีดังนี้

ลองเลย

• ลองใช้แอปตัวอย่างเพื่อดูตัวอย่างการใช้งาน API นี้
• ลองใช้โค้ดด้วยตนเองด้วย Codelab

ก่อนเริ่มต้น

1. รวมพ็อด ML Kit ต่อไปนี้ไว้ใน Podfile

   # To recognize Latin script
   pod 'GoogleMLKit/TextRecognition', '8.0.0'
   # To recognize Chinese script
   pod 'GoogleMLKit/TextRecognitionChinese', '8.0.0'
   # To recognize Devanagari script
   pod 'GoogleMLKit/TextRecognitionDevanagari', '8.0.0'
   # To recognize Japanese script
   pod 'GoogleMLKit/TextRecognitionJapanese', '8.0.0'
   # To recognize Korean script
   pod 'GoogleMLKit/TextRecognitionKorean', '8.0.0'
   

2. หลังจากติดตั้งหรืออัปเดต Pod ของโปรเจ็กต์แล้ว ให้เปิดโปรเจ็กต์ Xcode โดยใช้ .xcworkspace ML Kit รองรับ Xcode เวอร์ชัน 12.4 ขึ้นไป

1. สร้างอินสแตนซ์ของ TextRecognizer

// When using Latin script recognition SDK
let latinOptions = TextRecognizerOptions()
let latinTextRecognizer = TextRecognizer.textRecognizer(options:options)

// When using Chinese script recognition SDK
let chineseOptions = ChineseTextRecognizerOptions()
let chineseTextRecognizer = TextRecognizer.textRecognizer(options:options)

// When using Devanagari script recognition SDK
let devanagariOptions = DevanagariTextRecognizerOptions()
let devanagariTextRecognizer = TextRecognizer.textRecognizer(options:options)

// When using Japanese script recognition SDK
let japaneseOptions = JapaneseTextRecognizerOptions()
let japaneseTextRecognizer = TextRecognizer.textRecognizer(options:options)

// When using Korean script recognition SDK
let koreanOptions = KoreanTextRecognizerOptions()
let koreanTextRecognizer = TextRecognizer.textRecognizer(options:options)

// When using Latin script recognition SDK
MLKTextRecognizerOptions *latinOptions = [[MLKTextRecognizerOptions alloc] init];
MLKTextRecognizer *latinTextRecognizer = [MLKTextRecognizer textRecognizerWithOptions:options];

// When using Chinese script recognition SDK
MLKChineseTextRecognizerOptions *chineseOptions = [[MLKChineseTextRecognizerOptions alloc] init];
MLKTextRecognizer *chineseTextRecognizer = [MLKTextRecognizer textRecognizerWithOptions:options];

// When using Devanagari script recognition SDK
MLKDevanagariTextRecognizerOptions *devanagariOptions = [[MLKDevanagariTextRecognizerOptions alloc] init];
MLKTextRecognizer *devanagariTextRecognizer = [MLKTextRecognizer textRecognizerWithOptions:options];

// When using Japanese script recognition SDK
MLKJapaneseTextRecognizerOptions *japaneseOptions = [[MLKJapaneseTextRecognizerOptions alloc] init];
MLKTextRecognizer *japaneseTextRecognizer = [MLKTextRecognizer textRecognizerWithOptions:options];

// When using Korean script recognition SDK
MLKKoreanTextRecognizerOptions *koreanOptions = [[MLKKoreanTextRecognizerOptions alloc] init];
MLKTextRecognizer *koreanTextRecognizer = [MLKTextRecognizer textRecognizerWithOptions:options];

2. เตรียมรูปภาพอินพุต

สร้างออบเจ็กต์ VisionImage โดยใช้ UIImage หรือ CMSampleBuffer

หากคุณใช้ UIImage ให้ทำตามขั้นตอนต่อไปนี้

• สร้างออบเจ็กต์ VisionImage ด้วย UIImage ตรวจสอบว่าได้ระบุ .orientation ที่ถูกต้อง

  Swift

  let image = VisionImage(image: UIImage)
  visionImage.orientation = image.imageOrientation

  Objective-C

  MLKVisionImage *visionImage = [[MLKVisionImage alloc] initWithImage:image];
  visionImage.orientation = image.imageOrientation;

หากคุณใช้ CMSampleBuffer ให้ทำตามขั้นตอนต่อไปนี้

• ระบุการวางแนวของข้อมูลรูปภาพที่อยู่ใน CMSampleBuffer

  วิธีดูการวางแนวรูปภาพ

  Swift

  func imageOrientation(
    deviceOrientation: UIDeviceOrientation,
    cameraPosition: AVCaptureDevice.Position
  ) -> UIImage.Orientation {
    switch deviceOrientation {
    case .portrait:
      return cameraPosition == .front ? .leftMirrored : .right
    case .landscapeLeft:
      return cameraPosition == .front ? .downMirrored : .up
    case .portraitUpsideDown:
      return cameraPosition == .front ? .rightMirrored : .left
    case .landscapeRight:
      return cameraPosition == .front ? .upMirrored : .down
    case .faceDown, .faceUp, .unknown:
      return .up
    }
  }
        

  Objective-C

  - (UIImageOrientation)
    imageOrientationFromDeviceOrientation:(UIDeviceOrientation)deviceOrientation
                           cameraPosition:(AVCaptureDevicePosition)cameraPosition {
    switch (deviceOrientation) {
      case UIDeviceOrientationPortrait:
        return cameraPosition == AVCaptureDevicePositionFront ? UIImageOrientationLeftMirrored
                                                              : UIImageOrientationRight;
  
      case UIDeviceOrientationLandscapeLeft:
        return cameraPosition == AVCaptureDevicePositionFront ? UIImageOrientationDownMirrored
                                                              : UIImageOrientationUp;
      case UIDeviceOrientationPortraitUpsideDown:
        return cameraPosition == AVCaptureDevicePositionFront ? UIImageOrientationRightMirrored
                                                              : UIImageOrientationLeft;
      case UIDeviceOrientationLandscapeRight:
        return cameraPosition == AVCaptureDevicePositionFront ? UIImageOrientationUpMirrored
                                                              : UIImageOrientationDown;
      case UIDeviceOrientationUnknown:
      case UIDeviceOrientationFaceUp:
      case UIDeviceOrientationFaceDown:
        return UIImageOrientationUp;
    }
  }
        

• สร้างออบเจ็กต์ VisionImage โดยใช้ออบเจ็กต์ CMSampleBuffer และการวางแนว ดังนี้

  Swift

  let image = VisionImage(buffer: sampleBuffer)
  image.orientation = imageOrientation(
    deviceOrientation: UIDevice.current.orientation,
    cameraPosition: cameraPosition)

  Objective-C

   MLKVisionImage *image = [[MLKVisionImage alloc] initWithBuffer:sampleBuffer];
   image.orientation =
     [self imageOrientationFromDeviceOrientation:UIDevice.currentDevice.orientation
                                  cameraPosition:cameraPosition];

3. ประมวลผลรูปภาพ

จากนั้นส่งรูปภาพไปยังเมธอด process(_:completion:) ดังนี้

textRecognizer.process(visionImage) { result, error in
  guard error == nil, let result = result else {
    // Error handling
    return
  }
  // Recognized text
}

[textRecognizer processImage:image
                  completion:^(MLKText *_Nullable result,
                               NSError *_Nullable error) {
  if (error != nil || result == nil) {
    // Error handling
    return;
  }
  // Recognized text
}];

4. ดึงข้อความจากบล็อกข้อความที่ระบบจดจำได้

หากการดำเนินการจดจำข้อความสำเร็จ ระบบจะแสดงผลออบเจ็กต์ Text ออบเจ็กต์ Text มีข้อความแบบเต็มที่ระบบจดจำได้ในรูปภาพและออบเจ็กต์ TextBlock ตั้งแต่ 0 รายการขึ้นไป

TextBlock แต่ละรายการแสดงบล็อกข้อความสี่เหลี่ยมผืนผ้า ซึ่งมีออบเจ็กต์ TextLine ตั้งแต่ 0 รายการขึ้นไป ออบเจ็กต์ TextLine แต่ละรายการมีออบเจ็กต์ TextElement ตั้งแต่ 0 รายการขึ้นไป ซึ่งแสดงถึงคำและเอนทิตีที่คล้ายคำ เช่น วันที่และตัวเลข

สำหรับออบเจ็กต์ TextBlock, TextLine และ TextElement แต่ละรายการ คุณจะได้รับข้อความที่ระบบจดจำได้ในขอบเขตและพิกัดขอบเขตของขอบเขตนั้น

เช่น

let resultText = result.text
for block in result.blocks {
    let blockText = block.text
    let blockLanguages = block.recognizedLanguages
    let blockCornerPoints = block.cornerPoints
    let blockFrame = block.frame
    for line in block.lines {
        let lineText = line.text
        let lineLanguages = line.recognizedLanguages
        let lineCornerPoints = line.cornerPoints
        let lineFrame = line.frame
        for element in line.elements {
            let elementText = element.text
            let elementCornerPoints = element.cornerPoints
            let elementFrame = element.frame
        }
    }
}

NSString *resultText = result.text;
for (MLKTextBlock *block in result.blocks) {
  NSString *blockText = block.text;
  NSArray<MLKTextRecognizedLanguage *> *blockLanguages = block.recognizedLanguages;
  NSArray<NSValue *> *blockCornerPoints = block.cornerPoints;
  CGRect blockFrame = block.frame;
  for (MLKTextLine *line in block.lines) {
    NSString *lineText = line.text;
    NSArray<MLKTextRecognizedLanguage *> *lineLanguages = line.recognizedLanguages;
    NSArray<NSValue *> *lineCornerPoints = line.cornerPoints;
    CGRect lineFrame = line.frame;
    for (MLKTextElement *element in line.elements) {
      NSString *elementText = element.text;
      NSArray<NSValue *> *elementCornerPoints = element.cornerPoints;
      CGRect elementFrame = element.frame;
    }
  }
}

หลักเกณฑ์เกี่ยวกับรูปภาพที่อินพุตเข้ามา

• เพื่อให้ ML Kit จดจำข้อความได้อย่างถูกต้อง รูปภาพที่ป้อนต้องมีข้อความที่แสดงด้วยข้อมูลพิกเซลที่เพียงพอ โดยหลักการแล้ว อักขระแต่ละตัวควรมีขนาดอย่างน้อย 16x16 พิกเซล โดยทั่วไปแล้ว อักขระที่มีขนาดใหญ่กว่า 24x24 พิกเซลจะไม่ช่วยเพิ่มความแม่นยำ

  ตัวอย่างเช่น รูปภาพขนาด 640x480 อาจสแกนนามบัตรที่ครอบคลุมความกว้างทั้งหมดของรูปภาพได้ดี หากต้องการสแกนเอกสารที่พิมพ์บนกระดาษขนาด Letter คุณอาจต้องใช้รูปภาพขนาด 720x1280 พิกเซล

• การโฟกัสรูปภาพที่ไม่ดีอาจส่งผลต่อความแม่นยำในการจดจำข้อความ หากคุณไม่ได้ผลลัพธ์ที่ยอมรับได้ ให้ลองขอให้ผู้ใช้จับภาพอีกครั้ง

• หากคุณกำลังจดจำข้อความในแอปพลิเคชันแบบเรียลไทม์ คุณควรพิจารณาขนาดโดยรวมของรูปภาพที่ป้อน รูปภาพขนาดเล็กจะประมวลผลได้เร็วกว่า หากต้องการลดเวลาในการตอบสนอง ให้ตรวจสอบว่าข้อความครอบคลุมรูปภาพมากที่สุด และจับภาพที่ความละเอียดต่ำกว่า (โดยคำนึงถึงข้อกำหนดด้านความแม่นยำที่กล่าวถึงข้างต้น) ดูข้อมูลเพิ่มเติมได้ที่เคล็ดลับในการปรับปรุงประสิทธิภาพ

เคล็ดลับในการปรับปรุงประสิทธิภาพ

• สำหรับการประมวลผลเฟรมวิดีโอ ให้ใช้ API แบบซิงโครนัส results(in:) ของตัวตรวจจับ เรียกใช้เมธอดนี้จากฟังก์ชัน captureOutput(_, didOutput:from:) ของ AVCaptureVideoDataOutputSampleBufferDelegate เพื่อรับผลลัพธ์จากเฟรมวิดีโอที่ระบุแบบซิงโครนัส เก็บ alwaysDiscardsLateVideoFrames ของ AVCaptureVideoDataOutput ไว้เป็น true เพื่อจำกัดการเรียกใช้เครื่องมือตรวจจับ หากมีเฟรมวิดีโอใหม่พร้อมใช้งานขณะที่ตัวตรวจจับกำลังทำงาน ระบบจะทิ้งเฟรมนั้น
• หากคุณใช้เอาต์พุตของเครื่องตรวจจับเพื่อวางซ้อนกราฟิกบนรูปภาพอินพุต ให้รับผลลัพธ์จาก ML Kit ก่อน จากนั้นจึงแสดงผลรูปภาพและการวางซ้อนในขั้นตอนเดียว การทำเช่นนี้จะทำให้คุณแสดงผลไปยังพื้นผิวการแสดงผลเพียงครั้งเดียวสำหรับเฟรมอินพุตที่ประมวลผลแต่ละเฟรม ดูตัวอย่าง updatePreviewOverlayViewWithLastFrame ในตัวอย่างการเริ่มต้นใช้งานด่วนของ ML Kit
• ลองจับภาพที่ความละเอียดต่ำลง อย่างไรก็ตาม โปรดคำนึงถึงข้อกำหนดด้านขนาดรูปภาพของ API นี้ด้วย
• เพื่อหลีกเลี่ยงประสิทธิภาพที่อาจลดลง อย่าเรียกใช้อินสแตนซ์ TextRecognizer หลายรายการพร้อมกันโดยใช้ตัวเลือกสคริปต์ที่แตกต่างกัน