Skip to main content

Document detection on existing image

Using Cropping UI​

The Scanbot SDK allows users to leverage our advanced Crop Screen to detect a document on an existing image and also provides a nice UI 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​

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 classic 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(): void;

Dispose of the Cropping View element if you are done.

Direct document detection on image​

In addition to using the Crop Screen, users can directly run document detection on an image and process the results in their own custom UI. This provides flexibility for integrating document detection capabilities into a broader range of applications and user interfaces.

async detectDocument(image: Image, detectionParameters?: DeepPartial<DocumentScannerParameters>): Promise<DocumentDetectionResult>

See the API reference for details on the config and return types.

Example usage:

...
reader.readAsArrayBuffer(file);
reader.onload = async (e) => {
    const result = await scanbotSDK.detectDocument(reader.result);
    if (result.status === "OK") {
        const cropped = await scanbotSDK.imageCrop(reader.result, result.pointsNormalized);
        ...
    } 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