Skip to main content

Cropping | Web Document Scanner

Cropping UI​

Configuration​

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

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.

API​

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 image
image: Uint8Array;
// 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(): void;

Dispose of the Cropping View element if you are done.

Detection on the Image​

async cropAndRotateImageCcw(imageBuffer: ArrayBuffer, polygon: Polygon, rotations: number): Promise<ArrayBuffer>

Cropping and rotation operation on a still image on JPG file regardless of the image source (e.g. scanned document image, image picked from photo library, etc).

Example usage:

...
reader.readAsArrayBuffer(file);
reader.onload = async (e) => {
    const result = await scanbotSDK.detectDocument(reader.result);
    if (result.success === true) {
        const cropped = await scanbotSDK.cropAndRotateImageCcw(reader.result, result.polygon, 0);
        ...
    } else {
        ...
    }
};

Want to scan longer than one minute?

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

Get your free Trial License

What do you think of this documentation?

On this page

Scroll to top