Image Cropping

The Scanbot SDK provides the ability to move the edge and corner handles to redefine the polygon manually and the ability to rotate the scanned/imported image in 90-degree steps (counter-)clockwise.

There are two ways to integrate the component into the application:

• Ready to use UI component (more about RTU UI)
• Classic UI component (more about Classic components)

RTU-UI Component

The main class of the Ready-To-Use UI (RTU UI) component is SBSDKUICroppingViewController.

Usually, this view controller is used as a separate screen for editing scanned/imported images.

While you don't have direct control of the actual scanner view controller, you can use the SBSDKUICroppingScreenConfiguration to customize it in a variety of ways, such as colors, texts, and behavior.

Swift

import Foundation
import ScanbotSDK

class ImageEditingUISwiftViewController: UIViewController {

    // Page to edit.
    var editingPage: SBSDKDocumentPage?

    override func viewDidAppear(_ animated: Bool) {
        super.viewDidAppear(animated)

        // Check if the page to edit exists.
        guard let page = self.editingPage else { return }

        // Create the default configuration object.
        let configuration = SBSDKUICroppingScreenConfiguration.defaultConfiguration

        // Behavior configuration:
        // e.g disable the rotation feature.
        configuration.behaviorConfiguration.isRotationEnabled = false

        // UI configuration:
        // e.g. configure various colors.
        configuration.uiConfiguration.topBarBackgroundColor = UIColor.red
        configuration.uiConfiguration.topBarButtonsColor = UIColor.white

        // Text configuration:
        // e.g. customize a UI element's text
        configuration.textConfiguration.cancelButtonTitle = "Cancel"

        // Present the recognizer view controller modally on this view controller.
        SBSDKUICroppingViewController.present(on: self,
                                              page: page,
                                              configuration: configuration,
                                              delegate: self)

    }
}

extension ImageEditingUISwiftViewController: SBSDKUICroppingViewControllerDelegate {
    func croppingViewController(_ viewController: SBSDKUICroppingViewController, didFinish changedPage: SBSDKDocumentPage) {
        // Process the edited page and dismiss the editing screen
        viewController.dismiss(animated: true, completion: nil)
    }
}

Objective-C

#import "ImageEditingUIObjcViewController.h"
@import ScanbotSDK;

@interface ImageEditingUIObjcViewController () <SBSDKUICroppingViewControllerDelegate>

// Page to edit.
@property (strong, nonatomic) SBSDKDocumentPage *editingPage;

@end

@implementation ImageEditingUIObjcViewController

- (void)viewDidAppear:(BOOL)animated {
    [super viewDidAppear:animated];

    // Create the default configuration object.
    SBSDKUICroppingScreenConfiguration * configuration = [SBSDKUICroppingScreenConfiguration defaultConfiguration];

    // Behavior configuration:
    // e.g disable the rotation feature.
    configuration.behaviorConfiguration.isRotationEnabled = NO;

    // UI configuration:
    // e.g. configure various colors.
    configuration.uiConfiguration.topBarBackgroundColor = [UIColor redColor];
    configuration.uiConfiguration.topBarButtonsColor = [UIColor whiteColor];

    // Text configuration:
    // e.g. customize a UI element's text
    configuration.textConfiguration.cancelButtonTitle = @"Cancel";

    // Present the recognizer view controller modally on this view controller.
    [SBSDKUICroppingViewController presentOn:self
                                        page:self.editingPage
                               configuration:configuration
                                    delegate:self];
}

- (void)croppingViewController:(SBSDKUICroppingViewController *)viewController didFinish:(SBSDKDocumentPage *)changedPage {
    // Process the edited page and dismiss the editing screen
    [viewController dismissViewControllerAnimated:YES completion:nil];
}

@end

Classic UI Component

The main class of the Classic UI component is SBSDKImageEditingViewController.

Usually, this view controller is embedded as a child view controller into another view controller, the parent view controller. The parent view controller usually acts as the delegate and processes the recognition results. You still have full control over the UI elements and can add additional views and buttons to your view controller.

Swift

import UIKit
import ScanbotSDK

class ImageEditingSwiftViewController: UIViewController {

    // Image to edit.
    var editingImage: UIImage?

    override func viewDidAppear(_ animated: Bool) {
        super.viewDidAppear(animated)

        // Check if the image to edit is not nil.
        guard let image = self.editingImage else { return }
        
        // Create the page.
        let page = SBSDKDocumentPage(image: image, polygon: nil, filter: .none)

        // Create editing view controller.
        let editingViewController = SBSDKImageEditingViewController.create(page: page)

        // Set self as a delegate.
        editingViewController.delegate = self

        // Create and set up a navigation controller to present control buttons.
        let navigationController = UINavigationController(rootViewController: editingViewController)
        navigationController.modalPresentationStyle = .fullScreen

        // Present editing screen modally.
        self.present(navigationController, animated: true, completion: nil)
    }
}

extension ImageEditingSwiftViewController: SBSDKImageEditingViewControllerDelegate {

    // Create a custom cancel button.
    func imageEditingViewControllerCancelButtonItem(_ editingViewController: SBSDKImageEditingViewController) -> UIBarButtonItem? {
        return UIBarButtonItem(systemItem: .cancel)
    }

    // Create a custom save button.
    func imageEditingViewControllerApplyButtonItem(_ editingViewController: SBSDKImageEditingViewController) -> UIBarButtonItem? {
        return UIBarButtonItem(systemItem: .save)
    }

    // Create a custom button for clockwise rotation.
    func imageEditingViewControllerRotateClockwiseToolbarItem(_ editingViewController: SBSDKImageEditingViewController) -> UIBarButtonItem? {
        return UIBarButtonItem(title: "Rotate clockwise",
                               style: .plain,
                               target: nil,
                               action: nil)
    }

    // Create a custom button for counter-clockwise rotation.
    func imageEditingViewControllerRotateCounterClockwiseToolbarItem(_ editingViewController: SBSDKImageEditingViewController) -> UIBarButtonItem? {
        return UIBarButtonItem(title: "Rotate counter-clockwise",
                               style: .plain,
                               target: nil,
                               action: nil)
    }

    // Handle canceling the changes.
    func imageEditingViewControllerDidCancelChanges(_ editingViewController: SBSDKImageEditingViewController) {
        self.dismiss(animated: true, completion: nil)
    }

    // Handle applying the changes.
    func imageEditingViewController(_ editingViewController: SBSDKImageEditingViewController,
                                    didApplyChangesWith polygon: SBSDKPolygon, croppedImage: UIImage) {
        // Process edited image.
        self.dismiss(animated: true, completion: nil)
    }
}

Objective-C

#import "ImageEditingObjcViewController.h"
@import ScanbotSDK;

@interface ImageEditingObjcViewController () <SBSDKImageEditingViewControllerDelegate>

// Image to edit.
@property (strong, nonatomic) UIImage *editingImage;

@end

@implementation ImageEditingObjcViewController

- (void)viewDidAppear:(BOOL)animated {
    [super viewDidAppear:animated];

    SBSDKDocumentPage *page = [[SBSDKDocumentPage alloc] initWithImage:self.editingImage
                                                               polygon:nil
                                                                filter:SBSDKImageFilterTypeNone];
    
    // Create editing view controller.
    SBSDKImageEditingViewController *viewController = [SBSDKImageEditingViewController createWithPage:page];

    // Set self as a delegate.
    viewController.delegate = self;

    // Create and set up a navigation controller to present control buttons.
    UINavigationController *navigationController = [[UINavigationController alloc] initWithRootViewController:viewController];
    navigationController.modalPresentationStyle = UIModalPresentationFullScreen;

    // Present editing screen modally.
    [self presentViewController:navigationController animated:YES completion:nil];
}

// Create a custom cancel button.
- (UIBarButtonItem *)imageEditingViewControllerCancelButtonItem:(SBSDKImageEditingViewController *)editingViewController {
    return [[UIBarButtonItem alloc] initWithBarButtonSystemItem:UIBarButtonSystemItemCancel menu:nil];
}

// Create a custom save button.
- (UIBarButtonItem *)imageEditingViewControllerApplyButtonItem:(SBSDKImageEditingViewController *)editingViewController {
    return [[UIBarButtonItem alloc] initWithBarButtonSystemItem:UIBarButtonSystemItemSave menu:nil];
}

// Create a custom button for clockwise rotation.
- (UIBarButtonItem *)imageEditingViewControllerRotateClockwiseToolbarItem:(SBSDKImageEditingViewController *)editingViewController {
    return [[UIBarButtonItem alloc] initWithTitle:@"Rotate clockwise"
                                            style:UIBarButtonItemStylePlain
                                           target:nil
                                           action:NULL];
}

// Create a custom button for counter-clockwise rotation.
- (UIBarButtonItem *)imageEditingViewControllerRotateCounterClockwiseToolbarItem:(SBSDKImageEditingViewController *)editingViewController {
    return [[UIBarButtonItem alloc] initWithTitle:@"Rotate counter-clockwise"
                                            style:UIBarButtonItemStylePlain
                                           target:nil
                                           action:NULL];
}

// Handle canceling the changes.
- (void)imageEditingViewControllerDidCancelChanges:(SBSDKImageEditingViewController *)editingViewController {
    [self dismissViewControllerAnimated:YES completion:nil];
}

// Handle applying the changes.
- (void)imageEditingViewController:(SBSDKImageEditingViewController *)editingViewController
        didApplyChangesWithPolygon:(SBSDKPolygon *)polygon croppedImage:(UIImage *)croppedImage {
    [self dismissViewControllerAnimated:YES completion:nil];
}

@end

Want to scan longer than one minute?

Generate your free "no-strings-attached" Trial License and properly test the Scanbot SDK.

Get your free Trial License

What do you think of this documentation?

What can we do to improve it? Please be as detailed as you like.

---