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

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

Text Recognition v2 API
คำอธิบายจดจำข้อความในรูปภาพหรือวิดีโอ รองรับสคริปต์ ละติน จีน เทวนาครี ญี่ปุ่น และเกาหลี รวมถึงภาษาที่ หลากหลาย
ชื่อ SDKGoogleMLKit/TextRecognition
GoogleMLKit/TextRecognitionChinese
GoogleMLKit/TextRecognitionDevanagari
GoogleMLKit/TextRecognitionJapanese
GoogleMLKit/TextRecognitionKorean
การใช้งานเนื้อหาจะลิงก์กับแอปของคุณแบบคงที่ในระหว่างเวลาบิลด์
ผลกระทบต่อขนาดแอปประมาณ 38 MB ต่อ SDK สคริปต์
ประสิทธิภาพแบบเรียลไทม์ในอุปกรณ์ส่วนใหญ่สำหรับ SDK สคริปต์ละติน แต่จะช้ากว่าสำหรับสคริปต์อื่นๆ

ลองเลย

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

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

  1. ใส่ ML Kit Pods ต่อไปนี้ใน 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. หลังจากติดตั้งหรืออัปเดต Pods ของโปรเจ็กต์แล้ว ให้เปิดโปรเจ็กต์ Xcode โดยใช้ไฟล์ .xcworkspace ML Kit รองรับใน Xcode เวอร์ชัน 12.4 ขึ้นไป

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

สร้างอินสแตนซ์ของ TextRecognizer โดยเรียกใช้ +textRecognizer(options:) และส่งตัวเลือกที่เกี่ยวข้องกับ SDK ที่คุณประกาศเป็น ทรัพยากร Dependency ไว้ด้านบน

Swift

// 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)

Objective-C

// 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. เตรียมรูปภาพอินพุต

ส่งรูปภาพเป็น UIImage หรือ CMSampleBufferRef ไปยังเมธอด process(_:completion:) ของ TextRecognizer:

สร้างออบเจ็กต์ 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:)

Swift

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

Objective-C

[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 แต่ละรายการ คุณจะได้รับข้อความที่จดจำใน ภูมิภาคและพิกัดขอบเขตของภูมิภาค

ตัวอย่างเช่น

Swift

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
        }
    }
}

Objective-C

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 พิกเซล

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

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

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

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