Detect and Normalize
API Index
Detect and Normalize a Still Images
API Name | Description |
---|---|
detectQuad() | Detects quadrilaterals from an image. |
normalize() | Normalizes the source image based on the settings in options. |
Detect and Normalize Video Frame Images
API Name | Description |
---|---|
setImageSource() | Sets an image source for continous scanning. |
onQuadDetected | This event is triggered when a new quadrilateral is detected. |
setQuadResultFilter() | Sets a function to filter a detected quadrilateral. |
confirmQuadForNormalization() | Pauses the video stream and enter “editor mode” where the quadrilaterals in current frame are selectable and editable. Then you can select one quadrilateral that contains the content you are interested in and edit it to a desirable shape to be normalized. |
normalizeWithConfirmedQuad() | Normalizes the image with the one quadrilateral which is confirmed after confirmQuadForNormalization() . |
startScanning() | Opens the camera and starts continuous scanning of incoming images. |
pauseScanning() | Pauses continuous scanning but keep the video stream. |
resumeScanning() | Resumes continuous scanning. |
stopScanning() | Stops continuous scanning and closes the video stream. |
detectQuad
Detects quadrilaterals from source data.
detectQuad: (source: Blob | DSImage | DCEFrame | HTMLImageElement | HTMLCanvasElement | string) => Promise<Array<DetectedQuadResult>>;
Parameters
source
: specifies the image to detect. The supported image data type include Blob
, DSImage
, DCEFrame
, HTMLImageElement
, HTMLCanvasElement
and a string which means an URL.
Return value
A promise resolving to an array of DetectedQuadResult
object that contains all the quad results found in this image.
Code snippet
let quads1 = await normalizer.detectQuad(blob);
let quads2 = await normalizer.detectQuad(url);
let quads3 = await normalizer.detectQuad(htmlImageElement);
let quads4 = await normalizer.detectQuad(htmlCanvasElement);
See also
normalize
Normalizes the source image based on the settings in options.
normalize: (source: Blob | DSImage | DCEFrame | HTMLImageElement | HTMLCanvasElement | string, options?: { quad?: Quadrilateral }) => Promise<NormalizedImageResult>;
Parameters
source
: specifies the image data to normalize. The supported image data type include Blob
, DSImage
, DCEFrame
, HTMLImageElement
, HTMLCanvasElement
and a string which means an URL.
options
: specifies how normalization should be done. If “quad” is passed, it means that the image should be cropped according to the quad, and the resulting image should also be “deskewed” and “perspective corrected”. More options to be added for the normalization in the future.
Return value
A promise resolving to a NormalizedImageResult
object that contains the normalized result of this image.
Code snippet
let quads = await normalizer.detectQuad(blob);
let normalizedImageResult = await normalizer.normalize(sourceImage, { quad: quads[0].location });
setImageSource
Sets an image source for continous scanning.
setImageSource(imageSource: ImageSource, options?: object): Promise<void>;
Parameters
imageSource
: specifies the image source.
options
: options to help with the usage of the ImageSource
object. At present, it only contains one property resultsHighlightBaseShapes
that accepts Dynamsoft.DCE.DrawingItem
as its value to help with the highlighting of text regions as shown in the code snippet below. More properties will be added as needed in the future.
Return value
A promise that resolves when the operation succeeds.
Code snippet
let normalizer = await Dynamsoft.DDN.DocumentNormalizer.createInstance();
let enhancer = await Dynamsoft.DCE.CameraEnhancer.createInstance();
let options = {
resultsHighlightBaseShapes: Dynamsoft.DCE.DrawingItem
};
await normalizer.setImageSource(enhancer, options);
normalizer.onQuadDetected = async (quadResults, sourceImage) => {
//...
}
await normalizer.startScanning(true);
onQuadDetected
This event is triggered when a new quadrilateral is detected.
onQuadDetected: (quadResults: Array<DetectedQuadResult>, sourceImage: Blob | DSImage | DCEFrame | HTMLImageElement | HTMLCanvasElement | string) => void;
Parameters
quadResults
: an array of DetectedQuadResult
that hold the detected quad results.
sourceImage
: specifies the image to detect. The supported image data type include Blob
, DSImage
, DCEFrame
, HTMLImageElement
, HTMLCanvasElement
and a string which means an URL.
Code snippet
normalizer.onQuadDetected = async (quadResults, sourceImage) => {
for (let quadResult of quadResults) {
let normalizedImageResult = await normalizer.normalize(sourceImage, { quad: quadResult.location });
}
}
setQuadResultFilter
Sets a function to filter a detected quadrilateral.
setQuadResultFilter: (filter: (quad: DetectedQuadResult) => boolean) => void;
Parameters
filter
: a function which is used to filter a DetectedQuadResult
and return a boolean to indicate whether it’s wanted.
Code snippet
normalizer.setQuadResultFilter( (quadResult) => {
if (quadResult.confidenceAsDocumentBoundary > 70) {
return true;
}
});
confirmQuadForNormalization
Pauses the video stream and enter “editor mode” where the quadrilaterals in current frame are selectable and editable. Then you can select one quadrilateral that contains the content you are interested in and edit it to a desirable shape to be normalized.
confirmQuadForNormalization: () => void;
Code snippet
normalizer.confirmQuadForNormalization();
normalizeWithConfirmedQuad
Normalizes the image with the one quadrilateral which is confirmed in confirmQuadForNormalization()
.
normalizeWithConfirmedQuad: () => Promise<NormalizedImageResult>;
Return value
A promise resolving to a NormalizedImageResult
object that contains the normalized result of this image.
Code snippet
let normalizedImageResult = await normalizer.normalizeWithConfirmedQuad();
if(normalizedImageResult) {
// Show the normalized image in a Canvas
const cvs = normalizedImageResult.image.toCanvas();
document.querySelector("#normalized-result").appendChild(cvs);
}
startScanning
Open the camera and starts continuous scanning of incoming images.
startScanning(appendOrShowUI?: boolean): Promise<void>;
Parameters
appendOrShowUI
: this parameter specifies how to handle the UI that comes with the bound CameraEnhancer instance. When set to true, if the UI doesn’t exist in the DOM tree, the CameraEnhancer instance will append it in the DOM and show it; if the UI already exists in the DOM tree but is hidden, it’ll be displayed. When not set or set to false, it means not to change the original state of that UI: if it doesn’t exist in the DOM tree, nothing shows up on the page; if it exists in the DOM tree, it may or may not show up depending on its original state.
Return value
A promise that resolves when the operation succeeds.
Code Snippet
let normalizer = await Dynamsoft.DDN.DocumentNormalizer.createInstance();
let enhancer = await Dynamsoft.DCE.CameraEnhancer.createInstance();
let options = {
resultsHighlightBaseShapes: Dynamsoft.DCE.DrawingItem
};
await normalizer.setImageSource(enhancer, options);
normalizer.onQuadDetected = async (quadResults, sourceImage) => {
for (let quadResult of quadResults) {
let normalizedImageResult = await normalizer.normalize(sourceImage, { quad: quadResult.location });
}
}
normalizer.startScanning(true);
pauseScanning
Pause continuous scanning but keep the video stream.
Parameters
options
: Options to configure how the pause works. At present, it only contains one property keepResultsHighlighted
which, when set to true, will keep the text found on the frame (at the time of the pause) highlighted.
pauseScanning(options?: object): void;
resumeScanning
Resumes continuous scanning.
resumeScanning(): void;
stopScanning
Stops continuous scanning and closes the video stream.
stopScanning(hideUI?: boolean): void;
Parameters
hideUI
: this parameter specifies how to handle the UI that comes with the bound CameraEnhancer instance. When set to true, if the UI doesn’t exist in the DOM tree or it exists but is hidden, nothing is done; if the UI already exists in the DOM tree and is shown, it’ll be hidden. When not set or set to false, it means not to change the original state of that UI: if it doesn’t exist in the DOM tree, nothing happens; if it exists in the DOM tree, it may or may not be hidden depending on its original state.
Code Snippet
normalizer.stopScanning(true);