UI Manipulation

Region and Video

ViewDecorator

DrawingLayer

DrawingStyle

View or Edit

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

Region

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.

The default value is

lineWidth = 2;
strokeStyle = "rgb(254,142,20)";
fillStyle = "rgba(0,0,0,0.5)";

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

Area

getViewDecorator

Gets what view decorator is shown.

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

See also

Area

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

DrawingLayer

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:

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

DrawingLayer

getDrawingLayers

Returns all the DrawingLayer objects.

getDrawingLayer(): Array<DrawingLayer>;

Parameters

None.

Return value

The array of all the DrawingLayer objects.

Code Snippet

let drawingLayers = enhancer.getDrawingLayers();

See also

DrawingLayer

clearDrawingLayers

Removes all the DrawingLayer objects.

clearDrawingLayers(): void;

Code Snippet

enhancer.clearDrawingLayers();

See also

DrawingLayer

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

DrawingStyle

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

DrawingStyle

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

DrawingStyle

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

DrawingStyle

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:

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

DrawingItem