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

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

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

ลองเลย

  • ลองใช้แอปตัวอย่างเพื่อดูตัวอย่างการใช้งาน 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

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

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