Capture Image Crop and more in SwiftUI

Gordon
4 min readJun 5, 2023

Capture Image Crop Perspective correction in SwiftUI.

In the world of iOS app development, Xcode and SwiftUI have revolutionized the way developers create intuitive and visually appealing user interfaces. SwiftUI provides a declarative approach to building user interfaces, while Xcode offers a comprehensive set of tools and frameworks.

In this article, we will explore how to create a SwiftUI project for capturing photos with advanced features such as a bridge to UIKit, camera photo adjustments, image orientaton to portrait up, light control, zoom control, and automatic border detection with perspective correction with just a few lines of code and excellent under rated Vision.framework

My xcode project provides simple code sample on every aspect, to save yourself from spending hours of search and testing.

  • Preview and Capture photo with Camera in Swift UI
  • Corrects capture image side orientation
  • Auto-detects edges with Metal and Vision
  • Corrects perspective and recreate a new image output

Bridging SwiftUI and UIKit

struct HostedViewController: UIViewControllerRepresentable {

@Binding private var coordinator: BridgingCoordinator

typealias UIViewControllerType = CameraViewController

init(coordinator: Binding<BridgingCoordinator>) {
_coordinator = coordinator
}

func makeCoordinator() -> Coordinator {
return Coordinator(self)
}

func makeUIViewController(context: Context) -> CameraViewController {
let vc = CameraViewController(coordinator: $coordinator)
vc.bridgingCoordinator = coordinator
return vc
}

func updateUIViewController(_ uiViewController: CameraViewController, context: Context) {
}

class Coordinator: NSObject {

let parent: HostedViewController
init(_ view: HostedViewController) {
self.parent = view
}
}
}

One of the great advantages of SwiftUI is its seamless interoperability with UIKit, Apple’s original framework for building iOS apps. SwiftUI’s UIKit bridge allows developers to leverage existing UIKit components and functionalities within a SwiftUI project. By integrating the UIKit camera controller, we can harness its powerful capabilities while still benefiting from SwiftUI’s simplified syntax and reactive nature.

Auto-Detect edges and Perspective Correction

func detectBorder(_ image: UIImage)
{
if self.toggleDetect == false
{
self.toggleDetect = true

// Create rectangle detect request
let rectDetectRequest = VNDetectRectanglesRequest()
rectDetectRequest.maximumObservations = 0
rectDetectRequest.minimumAspectRatio = 0.0
rectDetectRequest.maximumAspectRatio = 1.0
rectDetectRequest.minimumSize = 0.0
rectDetectRequest.quadratureTolerance = 45.0
rectDetectRequest.minimumConfidence = 0.0

// Create a request handler.
let imageRequestHandler = VNImageRequestHandler(cgImage: image.cgImage!, orientation: .up, options: [:])

// Send the requests to the request handler.
do {
try imageRequestHandler.perform([rectDetectRequest])
} catch let error as NSError {
print("Failed to perform first image request: \(error)")
}

guard let results = rectDetectRequest.results else {
return
}

print("\nFirst rectangle request result:")
print("\(results.count) rectangle(s) detected:")
print("\(String(describing: results))")

if results.count == 0 {
return
}

self.P1.x = results.first!.topLeft.x * image.size.width
self.P1.y = results.first!.topLeft.y * image.size.height

self.P2.x = results.first!.topRight.x * image.size.width
self.P2.y = results.first!.topRight.y * image.size.height

self.P3.x = results.first!.bottomRight.x * image.size.width
self.P3.y = results.first!.bottomRight.y * image.size.height

self.P4.x = results.first!.bottomLeft.x * image.size.width
self.P4.y = results.first!.bottomLeft.y * image.size.height

self.P1 = mirrorY(self.P1, image)
self.P2 = mirrorY(self.P2, image)
self.P3 = mirrorY(self.P3, image)
self.P4 = mirrorY(self.P4, image)
}

Straightening out photos taken at an angle or with skewed borders can be a tedious task. However, in our SwiftUI project, we can leverage advanced algorithms to automatically detect borders and apply perspective correction with the help of VISION Framwork by Apple. This feature ensures that users’ photos are properly aligned and free from distortion, resulting in visually pleasing and professional-looking images.

Light and Zoom Control

public func toggleTorch(on: Bool)
{
if self.videoDevice == nil {
return
}

sessionQueue.async { [unowned self] in

if self.videoDevice!.hasTorch {
do {
try self.videoDevice!.lockForConfiguration()

if on == true {
self.videoDevice!.torchMode = .on
} else {
self.videoDevice!.torchMode = .off
}

self.videoDevice!.unlockForConfiguration()
} catch {
print("Torch could not be used")
}
} else {
print("Torch is not available")
}
}
}

By toggling the light on or off, users can adapt to different lighting conditions, ensuring well-lit and balanced photos even in challenging environments. Also, a zoom control feature ensures that users can capture detailed shots regardless of their distance from the subject, adding flexibility and versatility to their photography experience.

SwiftUI previews User Interface views directly within xCode

With Xcode and SwiftUI, developers can create immersive and feature-rich apps that leverage the full potential of iOS devices. By building a SwiftUI project for capturing photos, we can offer users a seamless and intuitive photo-taking experience.

Through the integration of UIKit components, advanced camera adjustments, light control, zoom functionality, and automatic border detection with perspective correction, our project enables users to unleash their creativity and capture stunning moments effortlessly.

So, let’s embrace the power of Xcode and SwiftUI to build remarkable apps that revolutionize the way we capture and share photos.

Support my project here : https://www.buymeacoffee.com/jmapp/capture-image-crop-swiftui

Try out is my app project : QR Code Scan

--

--