Skip to main content

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

On this page