Skip to main content

Cropping | Web Document and Barcode Scanner

Cropping UI#


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

// Identifier (id-tag of html element) of the Cropping View parent element. RequiredcontainerId?: string;
// Determines whether scroll (incl. bounce) should be disabled when the cropping screen is active. Optional. True by defaultdisableScroll?: 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 0rotations?: number;
// Optional styling parameter. If left undefined, default styles will be appliedstyle?: CroppingViewStyle;


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"    }};

Note that magneticLines style exists only because it is somewhat of an experimental feature, there is room for improvement and optimization. See if it meets your requirements in its current form

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.


ScanbotSDK Cropping View classical 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 imageimage: Uint8Array;// The cropped polygonpolygon: Polygon;// Number of clockwise rotations appliedrotations: number

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

dispose(): void;

Dispose of the Cropping View element if you are done.