Document Crop

This component can be found under the Sybrin.Document namespace and is called DocumentCropComponent.

Full name: Sybrin.Document.DocumentCropComponent.

It is a component that displays the result of a document capture provided by the Sybrin Document JavaScript API and presents it in the form of a UI component, then allows the user to perform a cropping operation on it.

The document capture result may be obtained by either using an instance of the JavaScript API or by using a component such as DocumentCaptureComponent.

With default styling, the Document Crop component appears as follows:

Document Crop Component

Upon clicking "Crop", the onAccept event will fire.

Upon clicking "Retry", the onRetry event will fire.

Initialization

The document crop component can be initialized using the following code:

HTML

<div id='crop'></div>

JavaScript

// Option 1: Passing an id
var component = new Sybrin.Document.DocumentCropComponent({ 
    id: 'crop',
    result: result
});

// Option 2: Passing a DOM element
var element = document.getElementById('crop');
var component = new Sybrin.Document.DocumentCropComponent({ 
    element: element,
    result: result
});

component.initialize();

The Sybrin Web SDK provides the option to either provide the ID of the element you wish to use for component initialization, or to provide the element directly.

Please note that 'crop' is just an example in this context and the ID may be changed as desired as long as it matches the value provided during component initialization in JavaScript.

During initialization, the Document Crop component allows for a number of configuration options that may be provided using an object literal. The parameters that may be used on the object include the following:

Required:

• id (string): ID of the element you wish to use for component initialization. Not required if element is provided.

• element (HTMLElement): Element you wish to use for component initialization. Not required if id is provided.

• dataUri (string): The data URI of the original document image.

Optional:

• cropSelectionStart (Sybrin.Document.CropSelectionStart): Sets how the crop selection area should be initialized. The options are middle (0) and full (1). The middle option sets the crop selection area to start as a smaller block in the center of the image. The full option will initially select the entire image.

• translations ({ [key: string]: string }): An object literal representing a dictionary lookup that will be used for translating the component. Please see the translations section on this page for a list of all translatable text, as well as the localization page for a detailed description on how to implement localization.

Warning: Initialization will fail if the intended host element does not exist yet.

Always ensure that the initialize function is only called once the DOM is loaded.

Destruction

The document crop component may be removed from the UI by calling the "destroy()" function on it.

Example:

component.destroy();

Functions

Initialize

initialize(): void

Initializes the component's DOM and events.

Destroy

destroy(): void

Destroys the component's DOM and events.

Set Translations

setTranslations(translations?: { [key: string]: string; }): void

Changes the component's translations to the provided values and updates the DOM accordingly.

Events

The document crop component offers multiple events. To hook onto an event, simply assign a function to it.

The following options are available:

• onAccept(croppedDataUri: string)

• onRetry()

On Accept

This function is called when the user clicks on the continue button. To hook onto the event, you may use the following code:

component.onAccept = function(croppedDataUri) {
    // Your code here
}

The parameter is the data URI string of the cropped image data.

On Retry

This function is called when the user clicks on the retry button. To hook onto the event, you may use the following code:

component.onRetry = function() {
    // Your code here
}

No parameters are provided to this function call.

Styling

The document crop component is structured as follows:

<div class="sybrin-document-document-crop-component sybrin-document-container sybrin-sdk-container">
    <div class="sybrin-document-component-section sybrin-sdk-component-section sybrin-document-center">
        <img class="sybrin-document-crop-element" id="selection" />
    </div>

    <div class="sybrin-document-button-section sybrin-sdk-button-section sybrin-document-crop-main-buttons">
        <button class="sybrin-document-retry sybrin-document-flow-button sybrin-sdk-flow-button sybrin-secondary">Retry</button>
        <button class="sybrin-document-accept sybrin-document-flow-button sybrin-sdk-flow-button">Crop</button>
    </div>
</div>

The classes and elements specified above may be used to freely style the document crop component as desired. To do so, simply create a stylesheet and include it in the project, then style according to the above classes and elements.

Styling implementation example:

HTML

index.html

<html>
<head>
    <link rel="stylesheet" type="text/css" href="styles.css" media="screen"/>
</head>
<body>
    <div id='component'></div>
</body>
</html>ult

CSS

styles.css

.sybrin-document-flow-button {
    background: #963296;
    border: 2px solid #963296;
}

.sybrin-document-flow-button.sybrin-secondary {
    color: #963296;
    background-color: #f3e0f3;
    border: 2px solid #f3e0f3;
}

Before Styling

After Styling

Translations

Currently, no translations are available.