Using the Web Document Scanner SDK's cropping UI screen

Overview

The Scanbot SDK includes an advanced cropping UI to detect a document on an existing image and provides an intuitive user experience for manually adjusting the detected polygon's corners. This is particularly useful when users want to apply precise cropping to a document photo already available on their device.

Configuration

The Cropping View takes a CroppingViewConfiguration parameter. It has the following format:

// Identifier (id-tag of html element) of the Cropping View parent element. Required.
containerId?: string;

// Determines whether scroll (incl. bounce) should be disabled when the cropping screen is active. Optional. True by default.
disableScroll?: boolean;

// Optional document polygon parameter.
// If undefined, detection will be performed and, if a document is then found, a polygon will be applied.
polygon?: Polygon;

// Image element to be cropped. Required.
image: Uint8Array;

// Initial rotations of the original image. Default is 0.
rotations?: number;

// Optional styling parameter. If left undefined, default styles will be applied.
style?: CroppingViewStyle;

Styling

The styling options and default values of the Cropping View are the following:

padding?: number = 10;
polygon?: {
      color?: string = "#1ec31e",
      width?: number = 4,
      handles?: {
            color?: string = "white",
            border?: string = "1px solid lightgray",
            size?: number = 14
      }
};
magneticLines?: {
    disabled?: boolean = false,
    color?: string = "transparent"
};
magnifier?: {
    margin?: number = 15,
    size?: number = 100,
    zoom?: number = 1.5,
    border?: {
        width?: number = 2,
        color?: string = "white"
    },
    crosshair?: {
        size?: number = 20,
        color?: string = "white"
    }
};

Creating the view

To open the Cropping View, simply call the SDK function with the configuration object:

const croppingView = await scanbotSDK.openCroppingView(options);

You should store the Cropping View object in a globally accessible location, as additional cropping functions are functions of that object.

API

The Cropping View Classic UI Component contains the following public functions:

• rotate(rotations: number): Promise<void>;: The number of clockwise rotations you wish to apply to your image.

• detect(): Promise<void>;: If you are not happy with the detected polygon, you can re-detect and re-apply the polygon from the detected document.

• apply(): Promise<CroppingResult>;: The contents of the cropping result are as follows:

// The cropped and rotated image
image: Image;
// The cropped polygon
polygon: Polygon;
// Number of clockwise rotations applied
rotations: number

If you are happy with the polygon and the rotations, apply the changes and receive your new detection result.

Dispose of the Cropping View element via dispose(): void; when you are done.

Want to scan longer than one minute?

Generate a free trial license to test the Scanbot SDK thoroughly.

Get free trial license

Scanbot SDK is part of the Apryse SDK product family

A mobile scan is just the start. With Apryse SDKs, you can expand mobile workflows into full cross‑platform document processing. Whether you need to edit PDFs, add secure digital signatures, or use a fast, customizable document viewer and editor, Apryse gives you the tools to build powerful features quickly.

Learn more

Was this helpful?