Swift - 사진(앨범) 가져오기 (YPImagePicker 라이브러리)

Swift - 사진 가져오기 방법

 

 

앨범에서 사진 선택

 

1) UIImageView, Button 추가 

 

- 이미지뷰와 버튼 추가 후 모서리를 둥글게 설정하기 위해 outlet 추가 

- 이미지뷰의 cornerRadius를 이미지뷰의 height의 반으로 설정하므로써 정사각형 모양이 아닌 원형이 되도록 설정 

 

 

 

2. 사용할 라이브러리 설치 (YPImagePicker)

- pod 'YPImagePicker' 추가 후 'pod install' 

 

 

 

 

 

3. Plist entries (사용자 권한 추가)

 

- Info.list -> 우클릭 -> Open As -> Source Code 클릭하면 GUI 환경에서 소스코드로 변환  됨 

- 이후 소스코드에 Key, String을 복사 붙여넣기 

 

 

 

4.  사용 방법 확인 (Usage)

1)  라이브러리 import

import UIKit
import YPImagePicker

 

 

2) 이미지 선택 및 처리

    // button 클릭시 호출할 메서드
    @objc func onButtonClicked(){
        print("PictureViewController - onButtonClicked() called")
        
        // YPImagePicker 인스턴스 생성
        let picker = YPImagePicker()
        
        // 클로저를 사용하여 이미지 선택 및 처리 
        picker.didFinishPicking { [unowned picker] items, _ in
            if let photo = items.singlePhoto {
                // 이미지 선택 및 처리 로직
            }
            
            // picker 사라지게 하기
            picker.dismiss(animated: true, completion: nil)
        }

    }

 

 

 

3) 이미지 정보 가져오기 

if let photo = items.singlePhoto {
    // 이미지 정보 가져오기
    print(photo.fromCamera) // 이미지 소스 (카메라 또는 라이브러리)
    print(photo.image) // 사용자가 선택한 최종 이미지
    print(photo.originalImage) // 사용자가 선택한 원본 이미지 (필터가 적용되지 않은 상태)
    print(photo.modifiedImage) // 변환된 이미지, nil일 수도 있음
    print(photo.exifMeta) // 원본 이미지의 Exif 메타데이터 출력
}

 

 

4) 화면 띄우고 사라지게 하기

// button 클릭시 호출할 메서드
    @objc func onButtonClicked(){
        print("PictureViewController - onButtonClicked() called")
        
        // YPImagePicker 인스턴스 생성
        let picker = YPImagePicker()
        
        // 클로저를 사용하여 이미지 선택 및 처리
        picker.didFinishPicking { [unowned picker] items, _ in
            if let photo = items.singlePhoto {
                // 이미지 선택 및 처리 로직
                // 이미지 정보 가져오기
                print(photo.fromCamera) // 이미지 소스 (카메라 또는 라이브러리)
                print(photo.image) // 사용자가 선택한 최종 이미지
                print(photo.originalImage) // 사용자가 선택한 원본 이미지 (필터가 적용되지 않은 상태)
                print(photo.modifiedImage) // 변환된 이미지, nil일 수도 있음
                print(photo.exifMeta) // 원본 이미지의 Exif 메타데이터 출력
                
                } // end of photo
            
            // picker 사라지게 하기
            picker.dismiss(animated: true, completion: nil)
            
            } // end of picker.didFinishPicking
        
        // 이미지 선택 화면 표시
        present(picker, animated: true, completion: nil)

        }

    }

 

 

 

5) YPImagePickerConfiguration 인스턴스 생성

var config = YPImagePickerConfiguration()

 

 

 

6) 화면 설정

- 'config.screens' 속성을 사용하여 사용자에게 어떤 화면을 보여줄지 설정

        // 화면 설정 - 시물레이터를 사용하기 때문에 library만 사용하겠음
//        config.screens = [.library, .video, .photo]
        config.screens = [.library]

- '.library' : 앨범 또는 사진 라이브러리 화면을 보여줌. 사용자는 사진 선택 가능

- '.photo' : 카메라 뷰를 보여줌. 사용자는 촬영 가능

- '.video' : 비디오 라이브러 화면을 보여줌. 사용자는 비디오 선택 가능 

 

 

7) 피커 초기화 시 configuration 설정 

let picker = YPImagePicker(configuration: config)

 

 

8) imageView의 이미지를 선택한 이미지로 변경 

        // 클로저를 사용하여 이미지 선택 및 처리
        picker.didFinishPicking { [unowned picker] items, _ in
            if let photo = items.singlePhoto {
                // 이미지 선택 및 처리 로직
                // 이미지 정보 가져오기
                print(photo.fromCamera) // 이미지 소스 (카메라 또는 라이브러리)
                print(photo.image) // 사용자가 선택한 최종 이미지
                print(photo.originalImage) // 사용자가 선택한 원본 이미지 (필터가 적용되지 않은 상태)
                print(photo.modifiedImage) // 변환된 이미지, nil일 수도 있음
                print(photo.exifMeta) // 원본 이미지의 Exif 메타데이터 출력
                
                // 이미지뷰의 이미지를 photo.image로 설정 
                self.imageView.image = photo.image
            } // end of photo

 

 

 

- imageView를 conerRadius를 설정하여 원형으로 만들었지만 원형이 아님

→ contentMode가 '.scaleToFill' 이 기본 값이기 때문

 

 

 

 

 

 

9) contentMode 설정

        // 이미지뷰와 버튼의 cornerRadius 설정
        self.imageView.layer.cornerRadius = imageView.frame.height / 2
        self.imageView.contentMode = .scaleAspectFill
        self.button.layer.cornerRadius = 10

- '.scaleAspectFill' : 이미지 뷰에 맞게 확대 또는 축소하여 채우면서 이미지의 비율 유지 

 

 

 

 

 

 

전체 코드

//
//  PictureViewController.swift
//  PracticeSwift
//
//  Created by 이수현 on 2023/07/28.
//

import UIKit
import YPImagePicker

class PictureViewController: UIViewController {
    
    @IBOutlet weak var imageView: UIImageView!
    @IBOutlet weak var button: UIButton!
    
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        // 이미지뷰와 버튼의 cornerRadius 설정
        self.imageView.layer.cornerRadius = imageView.frame.height / 2
        self.imageView.contentMode = .scaleAspectFill
        self.button.layer.cornerRadius = 10
        
        // button Action 추가
        self.button.addTarget(self, action: #selector(onButtonClicked), for: .touchUpInside)
        
    }
    
    
    // button 클릭시 호출할 메서드
    @objc func onButtonClicked(){
        print("PictureViewController - onButtonClicked() called")
        
        // YPImagePickerConfiguration 인스턴스 생성
        var config = YPImagePickerConfiguration()
        
        // 화면 설정 - 시물레이터를 사용하기 때문에 library만 사용하겠음
//        config.screens = [.library, .video, .photo]
        config.screens = [.library]
        
        // YPImagePicker 인스턴스 생성
        let picker = YPImagePicker(configuration: config)
        
        // 클로저를 사용하여 이미지 선택 및 처리
        picker.didFinishPicking { [unowned picker] items, _ in
            if let photo = items.singlePhoto {
                // 이미지 선택 및 처리 로직
                // 이미지 정보 가져오기
                print(photo.fromCamera) // 이미지 소스 (카메라 또는 라이브러리)
                print(photo.image) // 사용자가 선택한 최종 이미지
                print(photo.originalImage) // 사용자가 선택한 원본 이미지 (필터가 적용되지 않은 상태)
                print(photo.modifiedImage) // 변환된 이미지, nil일 수도 있음
                print(photo.exifMeta) // 원본 이미지의 Exif 메타데이터 출력
                
                // 이미지뷰의 이미지를 photo.image로 설정
                self.imageView.image = photo.image
            } // end of photo
            
            // picker 사라지게 하기
            picker.dismiss(animated: true, completion: nil)
            
        } // end of picker.didFinishPicking
        
        // 이미지 선택 화면 표시
        present(picker, animated: true, completion: nil)
    }
}

 

 

 

 

 

사용한 라이브러리(YPImagePicker)

https://github.com/Yummypets/YPImagePicker#usage 

GitHub - Yummypets/YPImagePicker: 📸 Instagram-like image picker & filters for iOS