Skip to main content

Building an interface for cropping scanned documents with the Classic UI

Scanbot Cropping View

ScanbotCroppingView is an interactive UI component designed for extracting the area of interest from an image. It presents the image to the user and overlays an adjustable four-point polygon. Users can manually drag the corners to perfectly frame the document or trigger automatic detection to instantly find its edges.

The view also supports rotating the image, allowing for corrections before the final, perspective-corrected area is extracted.

Usage

Customize the UI and behavior of ScanbotCroppingView by using the component's properties. Each property is optional, and falls back to its default value if not specified. More on the available properties can be found in the API documentation.

Use a component ref to call methods that initiate the polygon detection, image rotation, or extraction of the area of interest. This gives you full programmatic control over the cropping process, allowing you to build a customized user experience.

The onCroppedAreaResult callback provides the final result, which you can then use to save the image or update a document.

Example:

docs-revamp/src/screens/CroppingScreen.tsx
loading...

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