This component can be found under the Sybrin.Document
namespace and is called DocumentProcessingComponent
.
Full name: Sybrin.Document.DocumentProcessingComponent
.
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 processing operations on it. These currently include:
Rotation
Cropping
The document capture result may be obtained by either using an instance of the JavaScript API or by using a component such as DocumentCaptureComponent
.
This component supports editing multiple images. If an array of images is provided, it will allow the user to cycle through all the images and apply processing to all of them, then emit the onAccept
event with an array of all processed images.
With default styling, the Document Processing component appears as follows:
Upon clicking the trashcan button, all changes on the current image will be discarded and it will revert to the original.
Upon clicking the clockwise arrow button, the image will be rotated 90 degrees clockwise.
Upon clicking the anti-clockwise arrow button, the image will be rotated 90 degrees anti-clockwise.
Upon clicking the crop button, the component will enter a cropping mode that allows the user to crop the image.
Upon clicking "Accept Image(s)", the onAccept
event will fire.
Upon clicking "Recapture Image(s)", the onRetry
event will fire.
The document processing component can be initialized using the following code:
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 'processing' 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 Processing 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.
dataUris (string[])
: Array of data URIs for all the images to be processed.
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.
backButtonMode (string: 'recapture' | 'back' | 'hidden')
: Sets back button behavior for the component. 'recapture'
will set the text to indicate that images will be recaptured. 'back'
will set the text to "Back". 'hidden'
will hide the button. Default 'recapture'
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.
The document processing component may be removed from the UI by calling the "destroy()" function on it.
Example:
initialize(): void
Initializes the component's DOM and events.
destroy(): void
Destroys the component's DOM and events.
setTranslations(translations?: { [key: string]: string; }): void
Changes the component's translations to the provided values and updates the DOM accordingly.
The document crop component offers multiple events. To hook onto an event, simply assign a function to it.
The following options are available:
onAccept(croppedDataUris: string[])
onRetry()
This function is called when the user clicks on the continue button. To hook onto the event, you may use the following code:
The parameter is an array of data URI strings for all processed image data.
This function is called when the user clicks on the retry button. To hook onto the event, you may use the following code:
No parameters are provided to this function call.
The document processing component is structured as follows:
The classes and elements specified above may be used to freely style the document processing 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:
Currently, no translations are available.