PictureModify 照片編輯器

APP功能：

• 鏡像旋轉
• 左、右旋轉
• 比例大小調整
• 8種官方濾鏡選擇
• 儲存照片

使用技術：

• UIImagePickerController — 選擇照片
• UIGraphicsImageRenderer — 照片儲存
• CIFilter — 濾鏡套用

選擇照片後將照片傳到下一頁

要在第一頁先取得照片資料，才將照片傳到第二頁，不然第二頁抓不到資料

第一步：設定UIImagePickerController() 點選照片

//點選button選擇照片
    @IBAction func openImage(_ sender: UIButton) {
        let controller = UIImagePickerController()
        controller.sourceType = .photoLibrary
        controller.delegate = self
        present(controller, animated: true, completion: nil)
    }

• 設定sourceType(來源類型) ，按.選擇需要的功能，photoLibrary(照片庫)
• 設定delegate(代理人)，此時會出現錯誤，按下fix會自動繼承UIImagePickerControllerDelegate,UINavigationControllerDelegate，才能執行下一步，設定要做的func

第二步：設定func執行要做的事情

如何找哪有可以用的func? 找到要使用的Delegate ，command+右鍵，這次要抓UIImagePickerController的資料，所以是找UIImagePickerControllerDelegate

//執行要做的事情
    func imagePickerController(_ picker: UIImagePickerController, didFinishPickingMediaWithInfo info: [UIImagePickerController.InfoKey : Any]) {
        image01 = info[.originalImage] as? UIImage
        //將選到的照片存入自定義資料 chooseImage裡面 等下方便傳給下一頁
        dismiss(animated: true, completion: nil)
        performSegue(withIdentifier: "show", sender: nil) //跳到下一頁
    }

• 找到 UIImagePickerController.InfoKey 的InfoKey command+右鍵，尋找可以info的資料，這次要存點選到的照片，所以選originalImage，記得轉型成UIImage
• segue用controller拉，在讀到照片資料後，performSegue(轉)到下一頁

第三步：設定要傳送到下一頁的資料

1. 自定義型別，存要傳的資料

struct ChooseImage {
    var chooseImage:UIImage?
}

2.在要接收資料的那頁，生出要接收資料的變數

var enterImage:ChooseImage!

3.拉IBSegueAction到要傳資料的起點頁面

@IBSegueAction func showImage(_ coder: NSCoder) -> editViewController? {
        let controller = editViewController(coder: coder) //生出下一頁的controller 資料
        controller?.enterImage = ChooseImage(chooseImage: image01)
        return controller
    }

UIGraphicsImageRenderer 照片儲存、activityViewController分享

將容器的view拉好outlet

@IBOutlet weak var backgroundImageView: UIView!

拉好一個share的 IBAction

//分享、儲存照片
    @IBAction func share(_ sender: UIButton) {
        let renderer = UIGraphicsImageRenderer(size: backgroundImageView.bounds.size)
        let image = renderer.image(actions: { (context) in
              backgroundImageView.drawHierarchy(in: backgroundImageView.bounds, afterScreenUpdates: true)
        })\\
           //分享照片
        let activityViewController = UIActivityViewController(activityItems: [image], applicationActivities: nil)
            present(activityViewController, animated: true, completion: nil)
        }

• 使用UIGraphicsImageRenderer 將view 變成UIImage
• 使用UIActivityViewController將UIImage分享照片

新增Privacy — Photo Library Additions Usage Description 詢問使用者能存照片嗎，不然會閃退

• 彼得潘利用 UIGraphicsImageRenderer 將 view 變成圖片

利用 UIGraphicsImageRenderer 將 view 變成圖片

CIFilter 濾鏡套用

func chooseFilters(){
        //濾鏡種類array
        let filters = ["","CIPhotoEffectInstant", "CIPhotoEffectNoir", "CIPhotoEffectTonal", "CIPhotoEffectTransfer", "CIPhotoEffectFade", "CIPhotoEffectProcess", "CIPhotoEffectMono","CIColorInvert"]
        let ciImage = CIImage(image: enterImage.chooseImage!) //將照片存成CIimage
        if let filter = CIFilter(name: filters[filterNumber]){
            filter.setValue(ciImage, forKey: kCIInputImageKey)
            if let outputImage = filter.outputImage{
                let filterImage = UIImage(ciImage: outputImage)
                editImageing.image = filterImage
            }
        
        }
    }

• apple官方參考濾鏡模板

Core Image Filter Reference

• 彼得潘CIFilter文章說明

#74 利用 CIFilter 實現美麗的圖片濾鏡

• 前輩作品參考

Good Mood Camera(好心情相機) 📷

• GitHub

alangprs/pictureModify

• 完成影片