본문 바로가기

iOS

[iOS] Image upload : UIImagePickerController

저기 빨간색 박스 이미지를 클릭하면, 사진첩이 뜨고 pick한 사진으로 이미지가 바뀌는 것을 구현해보자!

 


1️⃣ UIImagePickerController 객체 만들기

2️⃣ imagePicker 속성을 정의한 메소드

3️⃣ imagePicker Delegate 설정

4️⃣ imageView를 클릭했을 때 실행될 Action 메소드

5️⃣ imageView 클릭이 가능하도록 설정

 

 

 

1️⃣ UIImagePickerController 객체 만들기

- 전역변수로 만들어주기!

let imagePicker = UIImagePickerController()

 

 

2️⃣ imagePicker 속성을 정의한 메소드

func imageUpload() {
    self.imagePicker.sourceType = .photoLibrary // 앨범에서 가져옴
    self.imagePicker.allowsEditing = true // 수정 가능 여부
    self.imagePicker.delegate = self // picker delegate
}

 

 

 

3️⃣ imagePicker Delegate 설정

extension ViewController: UIImagePickerControllerDelegate, UINavigationControllerDelegate {
    
    func imagePickerController(_ picker: UIImagePickerController, didFinishPickingMediaWithInfo info: [UIImagePickerController.InfoKey : Any]) {
            
            var newImage: UIImage? = nil // update 할 이미지
            
            if let possibleImage = info[UIImagePickerController.InfoKey.editedImage] as? UIImage {
                newImage = possibleImage // 수정된 이미지가 있을 경우
            } else if let possibleImage = info[UIImagePickerController.InfoKey.originalImage] as? UIImage {
                newImage = possibleImage // 원본 이미지가 있을 경우
            }
            
            self.topImage.image = newImage // 받아온 이미지를 update
            picker.dismiss(animated: true, completion: nil) // picker를 닫아줌
            
        }
}

 

 

 

4️⃣ imageView를 클릭했을 때 실행될 Action 메소드

@objc func pickImage(){
    imageUpload()	// imagePicker 속성 정의 메소드
    self.present(self.imagePicker, animated: true)
}

 

 

 

5️⃣ imageView 클릭이 가능하도록 설정

// 스토리보드에서 imageView 가져오기
@IBOutlet weak var topImage: UIImageView!

override func viewDidLoad() {
    super.viewDidLoad()

    // 이미지 클릭 가능하도록 설정
    self.topImage.isUserInteractionEnabled = true
    
    // 만들어둔 Action 설정
    self.topImage.addGestureRecognizer(UITapGestureRecognizer(target: self, action: #selector(self.pickImage)))
}

 

 

🍎 구현 화면

 

 

 

 

 

다음은 카메라 연결해봐야지!


Reference

https://silver-g-0114.tistory.com/44