Mengambil dan menyimpan gambar pada aplikasi iOS
Cara mudah untuk mengambil gambar melalui kamera lalu menyimpannya tanpa terdeteksi oleh galeri foto
Hingga saat ini, banyak aplikasi yang dikembangkan menggunakan kamera. Biasanya fitur ini digunakan untuk melakukan verifikasi data, seperti foto KTP atau digunakan untuk membuat in-app gallery. Apabila kamu memperhatikan sistem aplikasi pada Jenius dan Instagram, aplikasi Jenius akan menggunakan kamera untuk memverifikasi umur pengguna melalui foto KTP, sedangkan aplikasi Instagram menggunakan kamera untuk post dan story, namun setiap foto yang diambil tidak muncul pada galeri foto ataupun langsung terupload ke cloud kecuali pengguna mengklik sebuah tombol.
Membuat sistem kamera yang bisa melakukan banyak hal akan menjadi tantangan yang besar bagi developer. Dalam sistem kamera, tentu ada pilihan untuk mengganti penggunaan kamera (kamera depan atau kamera belakang), mulai dari penerapan zooming system, flash, timer, hingga pengambilan gambar dari galeri lokal berdasarkan foto yang telah terambil sebelumnya. Belum lagi developer harus memahami library AVFoundation, library Apple yang mengatur kamera untuk merekam audio dan video. Banyaknya tombol dan view yang harus disiapkan menjadi suatu kesulitan tersendiri bagi developer.
Untungnya, Apple telah menyediakan UIImagePickerController untuk pengambilan gambar. Dengan class ini, kamu bisa mengatur banyak fitur seperti sumber pengambilan gambar, beberapa pengaturan kamera, hingga mengubah ukuran gambar. Pada tutorial ini kita akan menerapkan UIImagePickerController untuk pengambilan gambar.
Pengambilan Gambar
Dengan mengimplementasikan UIImagePickerController, developer tidak lagi perlu untuk membuat sebuah tampilan dan controller sendiri untuk menangani pengambilan gambar, melainkan hanya dengan menginisialisasikan dalam class, tampilan kamera atau galeri foto akan muncul dalam bentuk modal.
Berikut ini adalah contoh penerapan UIImagePickerController:
Ketika kamu melihat video di atas, kamu akan melihat bahwa pilihan input pada UIAlert terdapat 2 buah pilihan, dari kamera dan dari galeri foto, namun video di atas menunjukkan bahwa user memilih kamera. Setelah itu, foto yang yang telah diambil dapat diedit untuk ukuran aspect ratio 1:1 atau kotak. Lalu, gambar yang telah dipilih dan diedit akan muncul di layar utama.
Bagaimana cara menggunakannya?
Pertama, kita perlu menginisialisasikan controller di dalam view controller utama kita.
let imagePickerController = UIImagePickerController()Jangan lupa untuk mengatur delegate karena contoller ini akan menavigasi sendiri keluar dan masuk.
//Di dalam viewDidLoad
imagePickerController.delegate = self//Tambahkan beberapa delegate pada ViewController
class ViewController: UIImagePickerControllerDelegate, UINavigationControllerDelegate
Setelah itu, masukkan beberapa method yang diperlukan untuk menangani hasil keluaran gambar dari UIImagePickerController:
//Jika berhasil
func imagePickerController(_ picker: UIImagePickerController, didFinishPickingMediaWithInfo info: [UIImagePickerController.InfoKey : Any]) {}//Jika gagal
func imagePickerControllerDidCancel(_ picker: UIImagePickerController) {}
Bagaimana jika ada pengaturan tersendiri untuk penggunaan kamera atau galeri foto? Jika pada video di atas, saya menerapkan uialert untuk memilih, namun di sini, saya membebaskan kalian untuk mencoba seperti yang diinginkan. Berikut saya berikan beberapa pengaturan yang sering digunakan:
Source Type (asal foto didapatkan)
imagePickerController.sourceType = .camera atau .photoLibraryPengaturan Kamera
imagePickerController.showCameraControls = true atau falsePengaturan flash kamera
imagePickerController.cameraFlashMode = .on atau .off atau .autoPilihan kamera
imagePickerController.cameraDevice = .front atau .rearPengaturan mode pengambilan gambar
imagePickerController.cameraCaptureMode = .photo atau .video
Default : .photoPerizinan untuk mengedit gambar
imagePickerController.allowsEditing = true atau false
Sebelum menjalankan aplikasi, jangan lupa untuk menambahkan permission pada info.plist. Untuk kamera, tambahkan Privacy — Camera Usage Description, sedangkan untuk galeri foto, tambahkan Privacy — Photo Library Usage Description.
Ketika melakukan pengambilan gambar melalui kamera, kamu bisa menambahkan error handling apabila user tidak memperbolehkan menggunakan kamera untuk aplikasimu untuk mencegah terjadinya fatal error.
if UIImagePickerController.isSourceTypeAvailable(.camera){
//pengaturan kamera di sini
} else {
print("Camera not available")
}Setelah memasang berbagai pengaturan, kamu bisa memanggil controller dengan cara:
present(imagePickerController, animated: true, completion: nil)Apabila pengambilan gambar berhasil, mari kita mengisi method yang telah disediakan sebelumnya:
Pada baris 5 dan 8 dijelaskan bahwa adanya pengecekan apakah gambar yang diambil telah diedit dan tidak. Jika gambar telah diedit, maka sistem akan masuk ke dalam kondisi baris 5, jika tidak, maka akan masuk ke dalam kondisi baris 8. Pengembalian data dalam bentuk UIImage sehingga bisa langsung digunakan.
Store and Retrieve Image
Selanjutnya, bagaimana cara menyimpan gambar? Kita sudah memiliki gambar dalam bentuk UIImage, sekarang kita butuh mengubahkan menjadi file png atau jpeg dan memberinya nama, termasuk memilih tempat penyimpanan gambar.
Pertama, kita harus memberi nama pada foto yang terpilih. Pada contoh ini, saya memilih untuk menggunakan random string saja karena jumlah foto yang disimpan akan berjumlah besar tanpa sistem akan meminta user untuk memberi nama satu per satu. Selain itu, penggunaan random string juga mencegah adanya kesamaan nama. Walaupun bisa, namun kemungkinannya kecil sekali.
func randomString(length: Int) -> String {
let letters = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789"
return String((0..<length).map{ _ in letters.randomElement()! })
}Penggunaan nama file akan menjadi key utama untuk menyimpan dan memanggil kembali foto yang dibutuhkan. Sama halnya dengan User Default, key tidak boleh sama dengan yang lainnya agar tidak bertabrakan data.
Selanjutnya, kita akan membuat fungsi untuk membuat URL berdasarkan tempat foto (path) yang akan disimpan berdasarkan key yang kita miliki. Penyimpanan foto akan dilakukan pada document directory dengan bantuan file manager. Setelah mendapatkan document URL, tempat kita akan menyimpan foto, path tersebut akan disambung dengan nama file dan extensionnya.
func filePath(forKey key: String) -> URL? {
let fileManager = FileManager.default
guard let documentURL = fileManager.urls(for: .documentDirectory,
in: FileManager.SearchPathDomainMask.userDomainMask).first else { return nil }
return documentURL.appendingPathComponent(key + ".png")
}Pada fungsi di atas, path akan disimpan ke dalam documentURL, lalu disambungkan nama file (key) dan disambung dengan extension file yaitu png. Setelah menyiapkan beberapa method untuk penyimpanan, method untuk menyimpan sudah bisa dibuat.
Mengingat aplikasi akan menyimpan banyak foto, tentu saja akan memakan banyak sekali memori. Satu foto saja bisa memakan 5–6 MB, bayangkan berapa banyak memori yang terpakai jika aplikasi memiliki ratusan foto di dalamnya. Sungguh akan menjadi aplikasi yang memakan banyak memori. Namun, hal ini dapat ditangani dengan cara mengkompresnya menjadi ukuran yang lebih kecil. Jika foto hanya bertujuan menjadi thumbnail, maka ada baiknya foto yang disimpan menggunakan resolusi yang lebih kecil saja.
Cara penyimpanannya cukup mudah, kamu hanya perlu memasukkan gambar yang sudah dikompres ke dalam path yang sudah dibuat sebelumnya.
func storeImage(image: UIImage, forKey key: String){
if let pngRepresentation = image.jpegData(compressionQuality: 0){
if let filePath = filePath(forKey: key){
do {
try pngRepresentation.write(to: filePath, options: .atomic)
} catch {
print("Cannot save file: \(error)")
}
}
}
}Penyimpanan selesai, lalu kita buat pemanggilan gambar yang sudah tersimpan berdasarkan key yang sudah ada.
func retrieveImage(forKey key: String) -> UIImage? {
if let filePath = filePath(forKey: key),
let fileData = FileManager.default.contents(atPath: filePath.path),
let image = UIImage(data: fileData) {
return image
}
return nil
}Setelah selesai, kamu bisa memanggil dan menyimpan gambar berdasarkan key yang ada.
//Penyimpanan gambar
let fileName = randomString(length: 5)
storeImage(image: image, forKey: fileName)//Membuka kembali gambar
let image = retriveImage(forKey: "key")
Untuk menyimpulkan, silahkan lihat kodingan lengkap di bawah ini untuk sistem storing dan retriving image di Swift.
Kesimpulan
Tidak semua hal pada aplikasi mengharuskanmu untuk membuatnya sendiri. Pada tutorial ini, kita belajar menggunakan UIImagePickerController untuk sistem pengambilan gambar, entah dari kamera atau dari galeri foto. Selain itu, kita juga belajar untuk menyimpannya dalam bentuk file .png dan memanggilnya kembali dengan menggunakan key atau nama file. Tidak sulit, hanya perlu memanggil fungsi-fungsi tertentu.
Selamat mencoba dan semoga berhasil…
