[흡구오디] Swift 사진 찍는 기능 구현하기 | UIImagePickerController

안녕하세요!

 

오늘은 iOS 앱에서 사진 찍는 기능을 구현하는 법에 대해 알아보겠어요

텤 어 샷~ 포토 슛~

 

보통 사진 업로드를 위해서는

카메라로 찍기 or 앨범에 있는 사진 사용 일텐데요

 

제 앱의 경우 앨범 불러오는 기능까지 굳이 구현할 필요 없기 때문에

즉석에서 찍은 카메라 샷만 구현하도록 할게요

 

저는 카메라 버튼을 만들어주고 그 버튼을 누르면 카메라가 실행되도록하였답니다.

카메라 버튼 생성
-> 버튼 누르면 카메라 실행
-> 찍은 사진을 미리보기로 보여주기

 

카메라 버튼 생성

private var areaImage = UIButton().then {
    $0.setImage(UIImage(systemName: "camera.on.rectangle.fill"), for: .normal)
    $0.layer.borderWidth = 0.5
    $0.layer.borderColor = UIColor.systemGray4.cgColor
    $0.layer.cornerRadius = 5
    $0.layer.masksToBounds = true
  }
  
  // 아래에서 addItem도 해줌

 

UIButton으로 만들어줬어요

 

이미지 설정은 camera.on.rectangle.fill 아이콘으로!

 

그럼 이렇게 만들어졌어요

 

카메라 버튼 탭 이벤트

는 Rx로 간단하게 이벤트 바인딩해줬어요

// 위 뷰디드에서 이 함수 호출함

private func didTappedAreaImageButton() {
    self.areaImage.rx.tap.subscribe(
      onNext: { [weak self] in
        print("카메라 버튼 눌림")
        self?.openCamera()
      })
    .disposed(by: disposeBag)
  }

 

openCamera 메서드

여기부터 본격적으로 카메라 실행!

 

순서가 좀 뒤바꼈긴한데 양해 부탁드려요 ㅠㅠ

openCamera()

extension MarkerInfoInputViewController: UIImagePickerControllerDelegate, UINavigationControllerDelegate {
  
  func openCamera() {
    let camera = UIImagePickerController()
    camera.sourceType = .camera
    camera.delegate = self
    present(camera, animated: true, completion: nil)
  }
  
  //...아래에
}

 

이렇게 카메라를 열어 줄 수가 있어요

다른 설정 값 (ex: 카메라 열었을 때 전면/후면 뭘 먼저 띄워줄건지 등등) 들은 기본값으로 냅두고

딱 필요한 것만 설정! 

 

Delegate 채택

카메라를 띄우려면 UIImagePickerController를 써야 하고,
그때 필요한 델리게이트는 두 가지입니다.

• UIImagePickerControllerDelegate
• UINavigationControllerDelegate

저는 extension으로 분리해서 관리했어요

extension MarkerInfoInputViewController: UIImagePickerControllerDelegate, UINavigationControllerDelegate { ... }

 

이 두 델리게이트를 채택하면 최소 아래 두 개 메서드는 구현해야 해요

// 사용자가 사진을 선택(촬영)했을 때
func imagePickerController(
  _ picker: UIImagePickerController,
  didFinishPickingMediaWithInfo info: [UIImagePickerController.InfoKey : Any]
) {
  // 찍은 사진을 꺼내서 뷰에 보여주거나 저장하는 로직
}

// 사용자가 취소했을 때
func imagePickerControllerDidCancel(_ picker: UIImagePickerController) {
  picker.dismiss(animated: true)
}

 

 

저는 아래처럼 구현해줬답니다.

func imagePickerController(_ picker: UIImagePickerController, didFinishPickingMediaWithInfo info: [UIImagePickerController.InfoKey : Any]) {
    picker.dismiss(animated: true, completion: nil) //이걸 해줘야 사진을 찍었을 때 카메라가 닫혀요
    if let image = info[.originalImage] as? UIImage { //원본 이미지를 담아요
      self.areaImage.setImage(image, for: .normal) // 원본 이미지를 미리보기로 설정해요
      self.uploadImage(image) // 다음 포스팅에서 설명할 업로드 기능
    }
  }
  
  func imagePickerControllerDidCancel(_ picker: UIImagePickerController) {
    picker.dismiss(animated: true, completion: nil)//이걸 해줘야 사진 찍는 것을 취소했을때 카메라가 닫혀요
  }

 

 

미리보기 설정하면 이렇게 카메라 버튼에 방금 찍은 사진이 보여짐!

 

 

설명을 거꾸로 해서 보여드리는 전체 코드

extension MarkerInfoInputViewController: UIImagePickerControllerDelegate, UINavigationControllerDelegate {
  
  func openCamera() {
    let camera = UIImagePickerController()
    camera.sourceType = .camera
    camera.delegate = self
    present(camera, animated: true, completion: nil)
  }
  
  func imagePickerController(_ picker: UIImagePickerController, didFinishPickingMediaWithInfo info: [UIImagePickerController.InfoKey : Any]) {
    picker.dismiss(animated: true, completion: nil)
    if let image = info[.originalImage] as? UIImage {
      self.areaImage.setImage(image, for: .normal)
      self.uploadImage(image)
    }
  }
  
  func imagePickerControllerDidCancel(_ picker: UIImagePickerController) {
    picker.dismiss(animated: true, completion: nil)
  }
  
  func uploadImage(_ image: UIImage) {
    //는 다음 포스팅에서
  }
}

 

그럼 카메라로 사진 찍는 기능에 대한 설명은 여기까지에요

 

다음 포스팅은 이렇게 찍은 사진을 서버에 업로드하고 가져와서 사용하는 방법에 대해 알아봐요~

 

그럼 앙ㅇ뇽