Skip to main content

Cropping | Cordova Document Scanner

The Cropping UI provides functionality for manual cropping and rotation of an image. It uses the edge detection algorithm of the Scanbot SDK and contains some smart UI elements like magnetic lines and a magnifier.

alt text

Integrating the Cropping UI#

Use the plugin API method ScanbotSdk.UI.startCroppingScreen() to start the Cropping UI on a given Page object.

import ScanbotSdk, { CroppingScreenConfiguration, Page } from 'cordova-plugin-scanbot-sdk';
private SDK = ScanbotSdk.promisify();public scannedPages: Page[] = ...;
// Always make sure you have a valid license on runtime via SDK.getLicenseInfo()if (!licenseCheckMethod()) { return; }
const configs: CroppingScreenConfiguration = {  // Customize colors, text resources, behavior, etc..  doneButtonTitle: 'Save',  orientationLockMode: 'PORTRAIT',  topBarBackgroundColor: '#c8193c',  // see further configs ...};
const result = await this.SDK.UI.startCroppingScreen({  page: this.scannedPages[n],  uiConfigs: configs});
if (result.status === 'CANCELED') {  // user has canceled the cropping operation  return;}
// handle the modified page object from resultthis.scannedPages[n] = result.page;...

Handling the Result#

The result object contains the following fields:

  • result.status: Result status, 'OK' if the user applied changes to the image, 'CANCELED' if the user canceled the operation.
  • result.page: The updated Page object representing the updated cropped document image.

Customization#

The UI and the behavior of the Cropping screen can be customized by passing the configs value via CroppingScreenConfiguration. All configuration options are optional.

export interface CroppingScreenConfiguration{    /**     * String being displayed as a hint. Empty by default.     */    hintTitle?: string;    /**     * Text color of the hint title.     */    hintTitleColor?: string;    /**     * Background color of the main screen.     */    backgroundColor?: string;    /**     * Background color of the bottom toolbar.     */    bottomBarBackgroundColor?: string;    /**     * Color of the titles of all buttons in the bottom toolbar (Rotate button).     */    bottomBarButtonsColor?: string;    /**     * Title of the cancel button.     */    cancelButtonTitle?: string;    /**     * Title of the Done button.     */    doneButtonTitle?: string;    /**     * Default color of the cropping outline.     */    polygonColor?: string;    /**     * Outline color of magnetically snapped edges.     */    polygonColorMagnetic?: string;    /**     * Width of the cropping outline.     */    polygonLineWidth?: number;    /**     * Title of the Rotate button.     */    rotateButtonTitle?: string;    /**     * Background color of the top toolbar.     */    topBarBackgroundColor?: string;    /**     * Color of the titles of all buttons in the top toolbar (Cancel and Done buttons).     */    topBarButtonsColor?: string;    /**     * Title in the top bar (iOS only).     */    topBarTitle?: string;    /**     * Color of the title in the top bar (iOS only).     */    titleColor?: string;    /**     * Title of the Detect button.     */    detectButtonTitle?: string;    /**     * Title of the Reset button.     */    resetButtonTitle?: string;    /**     * Controls whether the Rotate button is hidden or not.     */    rotateButtonHidden?: boolean;    /**     * Controls whether the Detect/Reset button is hidden or not.     */    detectResetButtonHidden?: boolean;    /**     * UI orientation lock mode: PORTRAIT, LANDSCAPE, etc.     * By default the UI is not locked.     */    orientationLockMode?: UIOrientationMode;    /**     * Controls whether buttons should use all capitals style, as defined by the Android Material Design. Defaults to TRUE.     * Android only.     */    useButtonsAllCaps?: boolean;    /**     * Allows you to customize the accessibility configuration for the Cropping Screen UI     */    accessibilityConfiguration?: CroppingScreenAccessibilityConfiguration;}