คู่มือการแบ่งกลุ่มรูปภาพสำหรับ iOS

งานตัวแบ่งกลุ่มรูปภาพช่วยให้คุณแบ่งรูปภาพออกเป็นภูมิภาคตามหมวดหมู่ที่กำหนดไว้ล่วงหน้า และใช้เอฟเฟกต์ภาพ เช่น การเบลอพื้นหลัง วิธีการเหล่านี้แสดงวิธีใช้เครื่องมือแบ่งส่วนรูปภาพกับแอป iOS

ตัวอย่างโค้ดที่อธิบายในวิธีการเหล่านี้มีอยู่ใน GitHub

คุณสามารถดูการทํางานของงานนี้ได้โดยดูเว็บ Demo ดูข้อมูลเพิ่มเติมเกี่ยวกับความสามารถ รูปแบบ และตัวเลือกการกําหนดค่าของงานนี้ได้ที่ภาพรวม

ตัวอย่างโค้ด

ตัวอย่างโค้ด MediaPipe Tasks มีการใช้งานแอปแยกส่วนรูปภาพสำหรับ iOS แบบง่าย

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

คุณสามารถใช้แอปนี้เป็นจุดเริ่มต้นสําหรับแอป iOS ของคุณเอง หรือใช้อ้างอิงเมื่อแก้ไขแอปที่มีอยู่ โค้ดตัวอย่างตัวแบ่งกลุ่มรูปภาพโฮสต์อยู่ใน GitHub

ดาวน์โหลดรหัส

วิธีการต่อไปนี้แสดงวิธีสร้างสำเนาโค้ดตัวอย่างในเครื่องโดยใช้เครื่องมือบรรทัดคำสั่ง git

วิธีดาวน์โหลดโค้ดตัวอย่าง

1. โคลนที่เก็บ Git โดยใช้คําสั่งต่อไปนี้

   git clone https://github.com/google-ai-edge/mediapipe-samples/
   

2. คุณอาจกำหนดค่าอินสแตนซ์ git ให้ใช้การตรวจสอบแบบเบาบางเพื่อให้มีเฉพาะไฟล์สำหรับแอปตัวอย่าง Image Segmenter ดังนี้

   cd mediapipe-samples
   git sparse-checkout init --cone
   git sparse-checkout set examples/image_segmentation/ios/
   

หลังจากสร้างโค้ดตัวอย่างเวอร์ชันในเครื่องแล้ว คุณจะติดตั้งไลบรารีงาน MediaPipe, เปิดโปรเจ็กต์โดยใช้ Xcode และเรียกใช้แอปได้ ดูวิธีการได้ที่คู่มือการตั้งค่าสำหรับ iOS

คอมโพเนนต์หลัก

ไฟล์ต่อไปนี้มีโค้ดสําคัญสําหรับแอปพลิเคชันตัวอย่างโปรแกรมแบ่งกลุ่มรูปภาพ

• ImageSegmenterService.swift: เริ่มต้น Image Segmenter, จัดการการเลือกโมเดล และเรียกใช้การอนุมานกับข้อมูลอินพุต
• CameraViewController.swift: ใช้ UI สําหรับโหมดอินพุตฟีดกล้องสดและแสดงผลลัพธ์เป็นภาพ
• MediaLibraryViewController.swift ใช้ UI สำหรับโหมดการป้อนไฟล์ภาพนิ่งและวิดีโอ และแสดงผลลัพธ์เป็นภาพ

ตั้งค่า

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

การอ้างอิง

ตัวแบ่งส่วนรูปภาพใช้ไลบรารี MediaPipeTasksVision ซึ่งต้องติดตั้งโดยใช้ CocoaPods ไลบรารีนี้ใช้ได้กับทั้งแอป Swift และ Objective-C และไม่จำเป็นต้องมีการตั้งค่าเพิ่มเติมสำหรับภาษาใดภาษาหนึ่ง

ดูวิธีการติดตั้ง CocoaPods ใน macOS ได้ที่คู่มือการติดตั้ง CocoaPods ดูวิธีการสร้าง Podfile ที่มี Pod ที่จําเป็นสําหรับแอปได้ที่การใช้ CocoaPods

เพิ่มพ็อด MediaPipeTasksVision ใน Podfile โดยใช้โค้ดต่อไปนี้

target 'MyImageSegmenterApp' do
  use_frameworks!
  pod 'MediaPipeTasksVision'
end

หากแอปมีเป้าหมายการทดสอบหน่วย ให้ดูข้อมูลเพิ่มเติมเกี่ยวกับการตั้งค่า Podfile ในคู่มือการตั้งค่าสําหรับ iOS

รุ่น

งานตัวแบ่งส่วนรูปภาพของ MediaPipe ต้องใช้โมเดลที่ผ่านการฝึกซึ่งเข้ากันได้กับงานนี้ ดูข้อมูลเพิ่มเติมเกี่ยวกับโมเดลที่ผ่านการฝึกแล้วสำหรับโปรแกรมแบ่งส่วนรูปภาพได้ที่ส่วนภาพรวมงานของโมเดล

เลือกและดาวน์โหลดโมเดล แล้วเพิ่มลงในไดเรกทอรีโปรเจ็กต์โดยใช้ Xcode ดูวิธีการเพิ่มไฟล์ลงในโปรเจ็กต์ Xcode ได้ที่การจัดการไฟล์และโฟลเดอร์ในโปรเจ็กต์ Xcode

ใช้พร็อพเพอร์ตี้ BaseOptions.modelAssetPath เพื่อระบุเส้นทางไปยังโมเดลใน App Bundle ดูตัวอย่างโค้ดได้ที่ส่วนถัดไป

สร้างงาน

คุณสร้างงาน Image Segmenter ได้โดยเรียกใช้ตัวเริ่มต้นรายการใดรายการหนึ่ง ตัวเริ่มต้น ImageSegmenter(options:) จะยอมรับค่าสําหรับตัวเลือกการกําหนดค่า

หากไม่จําเป็นต้องเริ่มต้น Segmenter รูปภาพด้วยตัวเลือกการกําหนดค่าที่กําหนดเอง คุณสามารถใช้ตัวเริ่มต้น ImageSegmenter(modelPath:) เพื่อสร้าง Segmenter รูปภาพด้วยตัวเลือกเริ่มต้น ดูข้อมูลเพิ่มเติมเกี่ยวกับตัวเลือกการกำหนดค่าได้ที่ภาพรวมการกําหนดค่า

งานแบ่งกลุ่มรูปภาพรองรับข้อมูลอินพุต 3 ประเภท ได้แก่ ภาพนิ่ง ไฟล์วิดีโอ และสตรีมวิดีโอสด โดยค่าเริ่มต้น ImageSegmenter(modelPath:) จะเริ่มต้นงานสําหรับภาพนิ่ง หากต้องการให้เริ่มต้นงานเพื่อประมวลผลไฟล์วิดีโอหรือสตรีมวิดีโอสด ให้ใช้ ImageSegmenter(options:) เพื่อระบุโหมดการทำงานของวิดีโอหรือสตรีมแบบสด โหมดสตรีมสดยังต้องใช้ตัวเลือกการกำหนดค่าimageSegmenterLiveStreamDelegateเพิ่มเติม ซึ่งช่วยให้เครื่องมือแบ่งกลุ่มรูปภาพส่งผลลัพธ์การแบ่งกลุ่มรูปภาพไปยังผู้รับมอบสิทธิ์แบบไม่เป็นแบบเรียลไทม์

เลือกแท็บที่สอดคล้องกับโหมดการทํางานเพื่อดูวิธีสร้างงานและเรียกใช้การอนุมาน

Swift

import MediaPipeTasksVision

let modelPath = Bundle.main.path(forResource: "model",
                                      ofType: "tflite")

let options = ImageSegmenterOptions()
options.baseOptions.modelAssetPath = modelPath
options.runningMode = .image
options.shouldOutputCategoryMask = true
options.shouldOutputConfidenceMasks = false

let imageSegmenter = try ImageSegmenter(options: options)
    

import MediaPipeTasksVision

let modelPath = Bundle.main.path(forResource: "model",
                                      ofType: "tflite")

let options = ImageSegmenterOptions()
options.baseOptions.modelAssetPath = modelPath
options.runningMode = .video
options.shouldOutputCategoryMask = true
options.shouldOutputConfidenceMasks = false

let imageSegmenter = try ImageSegmenter(options: options)
    

import MediaPipeTasksVision

// Class that conforms to the `imageSegmenterLiveStreamDelegate` protocol and
// implements the method that the image segmenter calls once it finishes
// performing segmentation of each input frame.
class ImageSegmenterResultProcessor: NSObject, ImageSegmenterLiveStreamDelegate {

  func imageSegmenter(
    _ imageSegmenter: ImageSegmenter,
    didFinishSegmentation result: ImageSegmenterResult?,
    timestampInMilliseconds: Int,
    error: Error?) {

    // Process the image segmentation result or errors here.

  }
}

let modelPath = Bundle.main.path(forResource: "model",
                                      ofType: "tflite")

let options = ImageSegmenterOptions()
options.baseOptions.modelAssetPath = modelPath
options.runningMode = .liveStream
options.shouldOutputCategoryMask = true
options.shouldOutputConfidenceMasks = false

// Set `imageSegmenterLiveStreamDelegate` to the object of the class that
// confirms to the `ImageSegmenterLiveStreamDelegate` protocol.
let processor = ImageSegmenterResultProcessor()
options.imageSegmenterLiveStreamDelegate = processor

let imageSegmenter = try ImageSegmenter(options: options)
    

Objective-C

@import MediaPipeTasksVision;

NSString *modelPath = [[NSBundle mainBundle] pathForResource:@"model"
                                                      ofType:@"tflite"];

MPPImageSegmenterOptions *options = [[MPPImageSegmenterOptions alloc] init];
options.baseOptions.modelAssetPath = modelPath;
options.runningMode = MPPRunningModeImage;
options.shouldOutputCategoryMask = YES;
options.shouldOutputConfidenceMasks = NO;

MPPImageSegmenter *imageSegmenter =
  [[MPPImageSegmenter alloc] initWithOptions:options error:nil];
    

@import MediaPipeTasksVision;

NSString *modelPath = [[NSBundle mainBundle] pathForResource:@"model"
                                                      ofType:@"tflite"];

MPPImageSegmenterOptions *options = [[MPPImageSegmenterOptions alloc] init];
options.baseOptions.modelAssetPath = modelPath;
options.runningMode = MPPRunningModeVideo;
options.shouldOutputCategoryMask = YES;
options.shouldOutputConfidenceMasks = NO;

MPPImageSegmenter *imageSegmenter =
  [[MPPImageSegmenter alloc] initWithOptions:options error:nil];
    

@import MediaPipeTasksVision;

// Class that conforms to the `MPPImageSegmenterLiveStreamDelegate` protocol
// and implements the method that the image segmenter calls once it finishes
// performing segmentation of each input frame.

@interface APPImageSegmenterResultProcessor : NSObject 

@end

@implementation APPImageSegmenterResultProcessor

-   (void)imageSegmenter:(MPPImageSegmenter *)imageSegmenter
    didFinishSegmentationWithResult:(MPPImageSegmenterResult *)imageSegmenterResult
         timestampInMilliseconds:(NSInteger)timestampInMilliseconds
                           error:(NSError *)error {

    // Process the image segmentation result or errors here.

}

@end

NSString *modelPath = [[NSBundle mainBundle] pathForResource:@"model"
                                                      ofType:@"tflite"];

MPPImageSegmenterOptions *options = [[MPPImageSegmenterOptions alloc] init];
options.baseOptions.modelAssetPath = modelPath;
options.runningMode = MPPRunningModeLiveStream;
options.shouldOutputCategoryMask = YES;
options.shouldOutputConfidenceMasks = NO;

// Set `imageSegmenterLiveStreamDelegate` to the object of the class that
// confirms to the `MPPImageSegmenterLiveStreamDelegate` protocol.
APPImageSegmenterResultProcessor *processor =
  [APPImageSegmenterResultProcessor new];
options.imageSegmenterLiveStreamDelegate = processor;

MPPImageSegmenter *imageSegmenter =
  [[MPPImageSegmenter alloc] initWithOptions:options error:nil];
    

การใช้โค้ดตัวอย่างตัวแบ่งกลุ่มรูปภาพช่วยให้ผู้ใช้สลับระหว่างโหมดการประมวลผลได้ แนวทางนี้ทําให้โค้ดการสร้างงานซับซ้อนขึ้นและอาจไม่เหมาะกับกรณีการใช้งานของคุณ

ตัวเลือกการกำหนดค่า

งานนี้มีตัวเลือกการกำหนดค่าต่อไปนี้สำหรับแอป iOS

เมื่อตั้งค่าโหมดการทํางานเป็น LIVE_STREAM ตัวแบ่งกลุ่มรูปภาพจะต้องมีตัวเลือกการกําหนดค่า imageSegmenterLiveStreamDelegate เพิ่มเติม ซึ่งจะช่วยให้ตัวแบ่งกลุ่มรูปภาพแสดงผลลัพธ์การแบ่งกลุ่มรูปภาพแบบไม่พร้อมกันได้ ผู้รับมอบสิทธิ์ต้องใช้เมธอด imageSegmenter(_:didFinishSegmentation:timestampInMilliseconds:error:) ซึ่งตัวแบ่งส่วนรูปภาพจะเรียกใช้หลังจากประมวลผลผลลัพธ์ของการแบ่งเฟรมแต่ละเฟรม

เตรียมข้อมูล

คุณต้องแปลงรูปภาพหรือเฟรมอินพุตเป็นออบเจ็กต์ MPImage ก่อนส่งไปยังเครื่องมือแบ่งส่วนรูปภาพ MPImage รองรับรูปแบบรูปภาพ iOS ประเภทต่างๆ และใช้รูปภาพเหล่านั้นในโหมดการทํางานใดก็ได้สําหรับการอนุมาน ดูข้อมูลเพิ่มเติมเกี่ยวกับ MPImage ได้ที่ MPImage API

เลือกรูปแบบรูปภาพ iOS ตาม Use Case และโหมดการทํางานที่แอปพลิเคชันของคุณจําเป็นMPImageยอมรับรูปแบบรูปภาพ iOS UIImage, CVPixelBuffer และ CMSampleBuffer

UIImage

รูปแบบ UIImage เหมาะสําหรับโหมดการทํางานต่อไปนี้

• รูปภาพ: รูปภาพจาก App Bundle, แกลเลอรีของผู้ใช้ หรือระบบไฟล์ที่จัดรูปแบบเป็นรูปภาพ UIImage สามารถแปลงเป็นออบเจ็กต์ MPImage ได้

• วิดีโอ: ใช้ AVAssetImageGenerator เพื่อดึงข้อมูลเฟรมวิดีโอเป็นรูปแบบ CGImage แล้วแปลงเป็นรูปภาพ UIImage

// Load an image on the user's device as an iOS `UIImage` object.

// Convert the `UIImage` object to a MediaPipe's Image object having the default
// orientation `UIImage.Orientation.up`.
let image = try MPImage(uiImage: image)
    

// Load an image on the user's device as an iOS `UIImage` object.

// Convert the `UIImage` object to a MediaPipe's Image object having the default
// orientation `UIImageOrientationUp`.
MPImage *image = [[MPPImage alloc] initWithUIImage:image error:nil];
    

ตัวอย่างนี้จะเริ่มต้น MPImage ด้วยการวางแนวเริ่มต้น UIImage.Orientation.Up คุณสามารถเริ่มต้น MPImage ด้วยค่า UIImage.Orientation ที่รองรับค่าใดก็ได้ ตัวแบ่งส่วนรูปภาพไม่รองรับการวางแนวที่สะท้อนกลับ เช่น .upMirrored, .downMirrored, .leftMirrored, .rightMirrored

ดูข้อมูลเพิ่มเติมเกี่ยวกับ UIImage ได้ที่เอกสารประกอบสำหรับนักพัฒนาแอป Apple เกี่ยวกับ UIImage

CVPixelBuffer

รูปแบบ CVPixelBuffer เหมาะสําหรับแอปพลิเคชันที่สร้างเฟรมและใช้เฟรมเวิร์ก CoreImage ของ iOS ในการประมวลผล

รูปแบบ CVPixelBuffer เหมาะสําหรับโหมดการทํางานต่อไปนี้

• รูปภาพ: แอปที่สร้างรูปภาพ CVPixelBuffer หลังจากการประมวลผลบางอย่างโดยใช้เฟรมเวิร์ก CoreImage ของ iOS สามารถส่งไปยังเครื่องมือแบ่งกลุ่มรูปภาพในโหมดการเรียกใช้รูปภาพ

• วิดีโอ: เฟรมวิดีโอสามารถแปลงเป็นรูปแบบ CVPixelBuffer เพื่อประมวลผล จากนั้นส่งไปยังเครื่องมือแบ่งกลุ่มรูปภาพในโหมดวิดีโอ

• สตรีมแบบสด: แอปที่ใช้กล้อง iOS เพื่อสร้างเฟรมอาจได้รับการแปลงเป็นรูปแบบ CVPixelBuffer เพื่อประมวลผลก่อนที่จะส่งไปยังโปรแกรมแบ่งกลุ่มรูปภาพในโหมดสตรีมแบบสด

// Obtain a CVPixelBuffer.

// Convert the `CVPixelBuffer` object to a MediaPipe's Image object having the default
// orientation `UIImage.Orientation.up`.
let image = try MPImage(pixelBuffer: pixelBuffer)
    

// Obtain a CVPixelBuffer.

// Convert the `CVPixelBuffer` object to a MediaPipe's Image object having the
// default orientation `UIImageOrientationUp`.
MPImage *image = [[MPPImage alloc] initWithUIImage:image error:nil];
    

ดูข้อมูลเพิ่มเติมเกี่ยวกับ CVPixelBuffer ได้ที่เอกสารประกอบสำหรับนักพัฒนาแอป CVPixelBuffer ของ Apple

CMSampleBuffer

รูปแบบ CMSampleBuffer จะจัดเก็บตัวอย่างสื่อของประเภทสื่อแบบเดียวกัน และเหมาะอย่างยิ่งสำหรับโหมดการทํางานของสตรีมแบบสด เฟรมสดจากกล้อง iOS จะส่งแบบไม่พร้อมกันในรูปแบบ CMSampleBuffer โดย iOSAVCaptureVideoDataOutput

// Obtain a CMSampleBuffer.

// Convert the `CMSampleBuffer` object to a MediaPipe's Image object having the default
// orientation `UIImage.Orientation.up`.
let image = try MPImage(sampleBuffer: sampleBuffer)
    

// Obtain a `CMSampleBuffer`.

// Convert the `CMSampleBuffer` object to a MediaPipe's Image object having the
// default orientation `UIImageOrientationUp`.
MPImage *image = [[MPPImage alloc] initWithSampleBuffer:sampleBuffer error:nil];
    

ดูข้อมูลเพิ่มเติมเกี่ยวกับ CMSampleBuffer ได้ที่เอกสารประกอบสำหรับนักพัฒนาแอปของ Apple เกี่ยวกับ CMSampleBuffer

เรียกใช้งาน

หากต้องการเรียกใช้เครื่องมือแบ่งกลุ่มรูปภาพ ให้ใช้เมธอด segment() สำหรับโหมดการทํางานที่กําหนดโดยเฉพาะ ดังนี้

• ภาพนิ่ง: segment(image:)
• วิดีโอ: segment(videoFrame:timestampInMilliseconds:)
• สตรีมสด: segmentAsync(image:timestampInMilliseconds:)

ตัวอย่างโค้ดต่อไปนี้แสดงตัวอย่างง่ายๆ ของวิธีเรียกใช้เครื่องมือแยกแยะรูปภาพในโหมดการทํางานต่างๆ ต่อไปนี้

Swift

let result = try imageSegmenter.segment(image: image)
    

let result = try imageSegmenter.segment(
  videoFrame: image,
  timestampInMilliseconds: timestamp)
    

try imageSegmenter.segmentAsync(
  image: image,
  timestampInMilliseconds: timestamp)
    

Objective-C

MPPImageSegmenterResult *result =
  [imageSegmenter segmentImage:image error:nil];
    

MPPImageSegmenterResult *result =
  [imageSegmenter segmentVideoFrame:image
            timestampInMilliseconds:timestamp
                              error:nil];
    

BOOL success =
  [imageSegmenter segmentAsyncImage:image
            timestampInMilliseconds:timestamp
                              error:nil];
    

ตัวอย่างโค้ดเครื่องมือแบ่งกลุ่มรูปภาพแสดงการใช้งานโหมดแต่ละโหมดเหล่านี้โดยละเอียด segment(image:), segment(videoFrame:timestampInMilliseconds:) และ segmentAsync(image:timestampInMilliseconds:)

โปรดทราบดังต่อไปนี้

• เมื่อทำงานในโหมดวิดีโอหรือโหมดสตรีมแบบสด คุณต้องระบุการประทับเวลาของเฟรมอินพุตให้กับงานแบ่งกลุ่มรูปภาพด้วย

• เมื่อทำงานในโหมดรูปภาพหรือวิดีโอ งานตัวแบ่งส่วนรูปภาพจะบล็อกเธรดปัจจุบันจนกว่าจะประมวลผลรูปภาพหรือเฟรมอินพุตเสร็จ หากต้องการหลีกเลี่ยงการบล็อกเธรดปัจจุบัน ให้ดำเนินการประมวลผลในเธรดเบื้องหลังโดยใช้เฟรมเวิร์ก Dispatch หรือ NSOperation ของ iOS

• เมื่อทำงานในโหมดสตรีมแบบสด งานตัวแบ่งกลุ่มรูปภาพจะแสดงผลทันทีและไม่บล็อกเธรดปัจจุบัน โดยจะเรียกใช้วิธี imageSegmenter(_:didFinishSegmentation:timestampInMilliseconds:error:) กับเครื่องมือแบ่งกลุ่มรูปภาพหลังจากประมวลผลเฟรมอินพุตแต่ละเฟรม ตัวแบ่งกลุ่มรูปภาพจะเรียกใช้เมธอดนี้แบบไม่พร้อมกันในคิวการจัดเตรียมแบบอนุกรมเฉพาะ หากต้องการแสดงผลลัพธ์ในอินเทอร์เฟซผู้ใช้ ให้ส่งผลลัพธ์ไปยังคิวหลักหลังจากประมวลผลผลลัพธ์แล้ว หากมีการเรียกใช้ฟังก์ชัน segmentAsync เมื่องานแบ่งกลุ่มรูปภาพกำลังประมวลผลเฟรมอื่นอยู่ ตัวแบ่งกลุ่มรูปภาพจะไม่สนใจเฟรมอินพุตใหม่

จัดการและแสดงผลลัพธ์

เมื่อทำการอนุมาน งานที่แยกแยะรูปภาพจะแสดงผลลัพธ์เป็นImageSegmenterResult ออบเจ็กต์ที่มีผลลัพธ์ของงานแยกแยะ เนื้อหาของเอาต์พุตจะขึ้นอยู่กับประเภทเอาต์พุตที่คุณตั้งค่าไว้เมื่อกําหนดค่างาน

รูปภาพต่อไปนี้แสดงการแสดงภาพเอาต์พุตของงานสำหรับมาสก์ค่าหมวดหมู่ ช่วงของมาสก์หมวดหมู่คือ [0, 255] และค่าพิกเซลแต่ละค่าแสดงถึงดัชนีหมวดหมู่ที่ชนะของเอาต์พุตโมเดล หมวดหมู่/ดัชนีที่ชนะคือหมวดหมู่/ดัชนีที่มีคะแนนสูงสุดในบรรดาหมวดหมู่ที่โมเดลจดจําได้

เอาต์พุตมาสก์รูปภาพและหมวดหมู่ต้นฉบับ รูปภาพต้นทางจากชุดข้อมูล Pascal VOC 2012

โค้ดตัวอย่างเครื่องมือแบ่งกลุ่มรูปภาพแสดงวิธีแสดงผลลัพธ์ของเครื่องมือแบ่งกลุ่มรูปภาพ ดูรายละเอียดได้ในตัวอย่างโค้ด