Web Demos

BARCODE READER SDK DEMO

Explore the flexibe barcode reading settings to optimize for your specific usage scenario.

WEB TWAIN SDK DEMO

Try the most popular web scanner features: scan images, import local images and PDF files, edit, save to local, upload to database, and etc.

BARCODE READER JAVASCRIPT DEMO

Transform any camera-equipped devices into real-time, browser-based barcode and QR code scanners.

MRZ SCANNER WEB DEMO

Detects the machine-readable zone of a passport, scans the text, and parses into human-readable data.

APP STORE DEMOS

BARCODE READER SDK FOR IOS

BARCODE READER SDK FOR ANDROID

VIEW MORE DEMOS >
Resource Base
Table of contents

UI Manipulation

Region and Video

API Name Description
getVisibleRegion() Returns a Region object which specifies which part of the original video is shown in the video element.
addScanRegionOverlayCanvas() Adds a canvas of the same size as the scan area directly above the scan area.
removeScanRegionOverlayCanvas() Removes the specified Canvas element.
ifShowScanRegionMask Returns or sets whether the scan region mask is shown.
ifShowScanRegionLaser Returns or sets whether the laser indicator is shown in the scan region.
setScanRegionMaskStyle() Sets the styles for the scan region mask.
setVideoFit() Sets the object-fit CSS property of the video element.
getVideoFit() Returns the value of the object-fit CSS property of the video element.

ViewDecorator

API Name Description
setViewDecorator() Sets and shows the view decorator.
getViewDecorator() Gets what view decorator is shown.
setViewDecoratorLineWidth() Sets the line width for drawing the view decorator.
setViewDecoratorStrokeStyle() Sets the stroke style for drawing the view decorator..
setViewDecoratorFillStyle() Sets the fill style for drawing the view decorator.
setViewDecoratorMaskFillStyle() Sets the fill style for drawing the ask for the view decorator.

DrawingLayer

API Name Description
createDrawingLayer() Creates a DrawingLayer object.
getDrawingLayer() Gets the DrawingLayer specified by its ID.
getDrawingLayers() Returns an array of all DrawingLayer objects.
clearDrawingLayers() Removes all DrawingLayer objects.

DrawingStyle

API Name Description
createDrawingStyle() Creates a new DrawingStyle object and returns its ID.
getDrawingStyle() Returns the DrawingStyle object specified by its ID.
getDrawingStyles() Returns all DrawingStyle objects.
updateDrawingStyle() Updates an existing DrawingStyle specified by its ID.

View or Edit

API Name Description
setOriginalImage() Sets the original image to be drawn on the editor canvas.
getOriginalImage() Returns the original image shown on the editor canvas.
showOriginalImage() Shows the original image.
hideOriginalImage() Hides the original image.
deleteOriginalImage() Deletes the original image and removes the canvas that shows it.
getSelectedDrawingItems() Returns the selected DrawingItem objects.

getVisibleRegion

Returns a Region object which specifies which part of the original video is shown in the video element.

getVisibleRegion(inPixels?: boolean): Region;

Parameters

inPixels: [optional] The coordinate type. If omitted or set to false, the returned coordinates are represented by percentage, otherwise, by pixels.

Return value

The visible region represented by a Region object.

Code Snippet

enhancer.getVisibleRegion();

See also

addScanRegionOverlayCanvas

Adds a canvas of the same size as the scan region directly above the scan region.

addScanRegionOverlayCanvas(): HTMLCanvasElement;

Parameters

None.

Return value

The added HTMLCanvasElement object.

Code Snippet

let cvs = enhancer.addScanRegionOverlayCanvas();
let ctx = cvs.getContext('2d');
ctx.fillStyle = "white";
ctx.font = '50px serif';
ctx.fillText('Dynamsoft Camera Enhancer', 50, 90);

removeScanRegionOverlayCanvas

Removes the specified Canvas element.

removeScanRegionOverlayCanvas(cvs: HTMLCanvasELement): void;

Parameters

cvs : specifies the canvas.

Return value

None.

Code Snippet

let cvs = enhancer.addScanRegionOverlayCanvas();
//...
enhancer.removeScanRegionOverlayCanvas(cvs);

ifShowScanRegionMask

Returns or sets whether the scan region mask is shown. The default is true.

ifShowScanRegionMask: boolean;

ifShowScanRegionLaser

Returns or sets whether the laser indicator is shown in the scan region. The default is true.

This API only works when the viewer element contains the elements with the class names dce-scanarea and dce-scanlight (like the built-in viewer).

ifShowScanRegionLaser: boolean;

setScanRegionMaskStyle

Sets the styles for the scan region mask.

setScanRegionMaskStyle(maskStyle: any): void;

Parameters

maskStyle : specifies the new style. Read more on strokeStyle and fillStyle.

Return value

None.

Code Snippet

enhancer.setScanRegionMaskStyle({
    lineWidth: 5,
    strokeStyle: "white",
    fillStyle: "rgba(50,50,50,0.3)"
});

setVideoFit

Sets the object-fit CSS property of the video element.

setVideoFit(objectFit: string): void;

Parameters

objectFit : specify the new fit type. At present, only “cover” and “contain” are allowed and the default is “contain”. Check out more on object-fit.

Return value

None.

Code Snippet

enhancer.setVideoFit("cover");

getVideoFit

Returns the value of the object-fit CSS property of the video element.

getVideoFit(): string;

Parameters

None.

Return value

The value of the object-fit CSS property.

Code Snippet

enhancer.getVideoFit();

setViewDecorator

Sets and shows the view decorator.

setViewDecorator(type: string | string[], area: Area): void;

Parameters

type : specifies the decorator type. Allowed values are “rectangle” , “focus” , “crossline” , “crosshair” , [“rectangle”, “crossline”], [“rectangle”, “crosshair”], [“focus”, “crossline”] and [“focus”, “crosshair”]. If passed an empty string, the decorator is cleared.

area : specifies where to place the decorator. It accepts 4 values:

  • x, y: top-left point of the decorator in percentage (0~100) of the width/height of the viewer.
  • width, height: size of the decorator in percentage (0~100) of the width/height of the viewer.

Return value

None.

Code Snippet

let area = {
    x: 5,
    y: 10,
    width: 90,
    height: 80
};
enhancer.setViewDecorator(["rectangle", "crosshair"], area);

See also

getViewDecorator

Gets what view decorator is shown.

getViewDecorator(): {type: string[], area: Area, canvas: HTMLCanvasElement};

See also

setViewDecoratorLineWidth

Sets the line width for drawing the view decorator.

setViewDecoratorLineWidth(type: string, width: number): void;

Parameters

type : specifies the decorator type. Allowed values are “rectangle” , “focus” , “crossline” and “crosshair”.

width : specifies the line width.

Return value

None.

Code Snippet

let area = {
    x: 5,
    y: 10,
    width: 90,
    height: 80
};
enhancer.setViewDecoratorLineWidth("rectangle", 10);
enhancer.setViewDecorator(["rectangle", "crosshair"], area);

setViewDecoratorStrokeStyle

Sets the stroke style for drawing the view decorator.

setViewDecoratorStrokeStyle(type: string, strokeStyle: string): void;

Parameters

type : specifies the decorator type. Allowed values are “rectangle” , “focus” , “crossline” and “crosshair”.

strokeStyle : specifies the stroke style. Read more on strokeStyle.

Return value

None.

Code Snippet

let area = {
    x: 5,
    y: 10,
    width: 90,
    height: 80
};
enhancer.setViewDecoratorStrokeStyle("rectangle", "white");
enhancer.setViewDecorator(["rectangle", "crosshair"], area);

setViewDecoratorFillStyle

Sets the fill style for drawing the view decorator.

setViewDecoratorFillStyle(type: string, fillStyle: string): void;

Parameters

type : specifies the decorator type. Allowed values are “rectangle” and “focus”.

fillStyle : specifies the fill style. Read more on fillStyle.

Return value

None.

Code Snippet

let area = {
    x: 5,
    y: 10,
    width: 90,
    height: 80
};
enhancer.setViewDecoratorFillStyle("rectangle", "rgba(50,50,50,0.3)");
enhancer.setViewDecorator(["rectangle", "crosshair"], area);

setViewDecoratorMaskFillStyle

Sets the fill style for drawing the ask for the view decorator.

setViewDecoratorMaskFillStyle(type: string, fillStyle: string): void;

Parameters

type : specifies the decorator type. Allowed values are “rectangle” and “focus”.

fillStyle : specifies the fill style. Read more on fillStyle.

Return value

None.

Code Snippet

let area = {
    x: 5,
    y: 10,
    width: 90,
    height: 80
};
enhancer.setViewDecoratorMaskFillStyle("rectangle", "rgba(50,50,50,0.3)");
enhancer.setViewDecorator(["rectangle", "crosshair"], area);

createDrawingLayer

Creates a DrawingLayer object.

createDrawingLayer(): DrawingLayer;

Return value

The visible layer represented by a DrawingLayer object.

Code Snippet

let newDrawingLayer = enhancer.createDrawingLayer();

See also

getDrawingLayer

Returns an existing DrawingLayer specified by its ID. IDs start at 100 for the first custom DrawingLayer, 101 for the next, and so on.

getDrawingLayer(drawingLayerId: number): DrawingLayer;

Parameters

drawingLayerId : specifies the DrawingLayer id.

Return value

The DrawingLayer object specified by its input id.

Code Snippet

let drawingLayer = enhancer.getDrawingLayer(100);

Special Notice

If you are using Dynamsoft Camera Enhancer with Dynamsoft Barcode Reader, Dynamsoft Label Recognizer or Dynamsoft Document Normalizer, note that there are dedicated DrawingLayers for them as shown below:

SDK Name DrawingLayer ID
Dynamsoft Document Normalizer 1
Dynamsoft Label Recognizer 2
Dynamsoft Barcode Reader 3

You can manipulate these DrawingLayers directly, for example, the following code applies a different DrawingStyle to the DrawingLayer used by Dynamsoft Label Recognizer:

Alternatively, you can directly change the style already in use instead of replacing it with a new one. Learn more at updateDrawingStyle.

// Gets the DrawingLayer used by the Dynamsoft Label Recognizer instance to which enhancer is bound.
let dlrDrawingLayer = enhancer.getDrawingLayer(2);
// Creates a new style to be used.
let newStyleId = enhancer.createDrawingStyle({
    fillStyle: "rgba(100, 75, 245, 0.3)",
    lineWidth: 5,
    paintMode: "strokeAndFill",
    strokeStyle: "rgba(73, 173, 245, 1)"
});
// Replaces the old style with the new one.
dlrDrawingLayer.setDrawingStyle(newStyleId)

See also

getDrawingLayers

Returns all the DrawingLayers.

getDrawingLayer(): Array<DrawingLayer>;

Parameters

None.

Return value

The array of all the DrawingLayer objects.

Code Snippet

let drawingLayers = enhancer.getDrawingLayers();

See also

clearDrawingLayers

Removes all the DrawingLayer objects.

clearDrawingLayers(): void;

Code Snippet

enhancer.clearDrawingLayers();

See also

createDrawingStyle

Creates a new DrawingStyle object and returns its ID.

createDrawingStyle(styleDefinition: DrawingStyle): number; 

Parameters

styleDefinition : defines a DrawingStyle object. The following are all the allowed properties and their default values. All of them are optional, if a property is not included in the definition, it uses the default value.

  • lineWidth: 1.0
  • fillStyle: rgba(245, 236, 73, 0.3)
  • strokeStyle: rgba(245, 236, 73, 1)
  • paintMode: stroke
  • fontSize: 10
  • fontFamily: sans-serif

Return value

The id of the created DrawingStyle.

Code Snippet

let styleID = enhancer.createDrawingStyle({    
    lineWidth: 1.0,
    fillStyle: " rgba(73, 173, 245, 0.8)",
    strokeStyle: " rgba(73, 173, 245, 1)",
    paintMode: "fill",
    fontSize: 100, 
    fontFamily: "sans-serif"
});

See also

getDrawingStyle

Returns the DrawingStyle object specified by its Id.

The SDK comes with 8 default styles with the IDs 1 ~ 8, check DrawingStyle for more information.

getDrawingStyle(styleId: number): DrawingStyle; 

Parameters

styleId : specifies a DrawingStyle.

Return value

The DrawingStyle specified by the input id.

Code Snippet

// Change `styleId` to one that you know exists at runtime. 
let drawingStyle = enhancer.getDrawingStyle(100);

See also

getDrawingStyles

Returns all DrawingStyle objects.

getDrawingStyles(): Array<DrawingStyle>; 

Return value

The array of all of the DrawingStyle objects of current CameraEnhancer.

Code Snippet

let drawingStyles = enhancer.getDrawingStyles();

See also

updateDrawingStyle

Updates an existing DrawingStyle specified by its ID. You can update all properties of the DrawingStyle or you can update just a few of them. Check the code snippet for more information.

The update takes effect immediately.

updateDrawingStyle(styleId: number, styleDefinition: DrawingStyle): void; 

Parameters

styleId : specifies a DrawingStyle which needs to be updated.

styleDefinition : Defines a new DrawingStyle object.

Code Snippet

// Change the whole style
enhancer.updateDrawingStyle(100,  {
    fillStyle: "rgba(100, 75, 245, 0.3)",
    fontFamily: "sans-serif",
    fontSize: 25,
    lineWidth: 2,
    paintMode: "strokeAndFill",
    strokeStyle: "rgba(73, 173, 245, 1)"
});
// Only change the fontSize
enhancer.updateDrawingStyle(100, { fontSize: 30 });

See also

Special Notice

If you are using Dynamsoft Camera Enhancer with Dynamsoft Barcode Reader, Dynamsoft Label Recognizer or Dynamsoft Document Normalizer, you can use updateDrawingStyle() to update their dedicated styles. These SDKs use the styles of the following IDs:

SDK Name Style IDs
Dynamsoft Document Normalizer 1 (default), 5 (selected)
Dynamsoft Label Recognizer 2 (default), 6 (selected)
Dynamsoft Barcode Reader 3 (default), 7 (selected)

You can update these styles to apply changes to the DrawingLayers used by these products. For example, the following code changes the style for highlighting found barcodes:

enhancer.updateDrawingStyle(3,  {
    fillStyle: "rgba(100, 75, 245, 0.3)",
    lineWidth: 5,
    paintMode: "strokeAndFill",
    strokeStyle: "rgba(73, 173, 245, 1)"
});

setOriginalImage

Sets an image to be drawn on a canvas built into the UI. Call showOriginalImage() to show it.

setOriginalImage(imageData: Uint8Array | Uint8ClampedArray | HTMLCanvasElement, width: number, height: number): void; 

Parameters

imageData : specifies the image data in format of Uint8Array, Uint8ClampedArray or HTMLCanvasElement.

width: specifies the width of the image data.

height: specifies the height of the image data.

Code Snippet

let currentFrame = enhancer.getFrame();
let cvs = currentFrame.toCanvas();
enhancer.setOriginalImage(cvs, cvs.width, cvs.height);

getOriginalImage

Returns the original image.

getOriginalImage(): {imageData: Uint8Array | Uint8ClampedArray | HTMLCanvasElement, width: number, height: number}; 

Return value

The current original image in the format that it was passed in and its dimensions.

Code Snippet

let image = enhancer.getOriginalImage();

deleteOriginalImage

Deletes the original image.

async deleteOriginalImage(): Promise<void>; 

Code Snippet

await enhancer.deleteOriginalImage();

showOriginalImage

Shows the original image.

showOriginalImage(): void; 

Code Snippet

enhancer.showOriginalImage();

hideOriginalImage

Hides the original image.

async hideOriginalImage(): Promise<void>; 

Code Snippet

await enhancer.hideOriginalImage();

getSelectedDrawingItems

Returns the selected DrawingItem objects. These items can be from any drawingLayer but they share the same styleSelector which is “selected”.

getSelectedDrawingItems(): Array<DrawingItem>; 

Return value

The array of current selected DrawingItem objects.

Code Snippet

let drawingItems = enhancer.getSelectedDrawingItems();

See also

This page is compatible for:

Version 1.0

Is this page helpful?

YesYes NoNo

In this article:

latest version

  • Latest version
  • Version 2.3.2
  • Version 2.3.1
  • Version 2.1.0
  • Version 2.0.0
  • Version 1.0.3
  • Version 1.0.1
  • Version 1.0.0
Change +
© 2003–2022 Dynamsoft. All rights reserved.
Privacy Statement / Site Map / Home / Purchase / Support