Resource Base
Table of contents

ImageEditorView

Name Description
static createInstance Initializes a new instance of the ImageEditorView class.
dispose Releases all resources used by the ImageEditorView instance.
disposed Returns whether the ImageEditorView instance has been disposed of.
getUIElement Returns the HTMLDivElement, where the ImageEditorView UI is loaded.
setUIElement Sets a specific HTMLDivElement, where the UI element for the ImageEditorView will be loaded.
setOriginalImage Sets the image to be drawn on the ImageEditorView.
getOriginalImage Returns the current image drawn on the ImageEditorView.
createDrawingLayer Creates a new DrawingLayer object and returns it.
getDrawingLayer Retrieves a DrawingLayer object by its unique identifier (ID).
getAllDrawingLayers Returns an array of all DrawingLayer objects managed by this DrawingLayerManager.
clearUserDefinedDrawingLayers Clears all user-defined DrawingLayer objects.
deleteUserDefinedDrawingLayer Deletes a user-defined DrawingLayer object specified by its unique identifier (ID).
getSelectedDrawingItems Asynchronously returns an array of all selected DrawingItem instances across different layers.

createInstance

Initializes a new instance of the ImageEditorView class.

static createInstance(defaultUIElement?: HTMLDivElement | string): Promise<ImageEditorView>;

Parameters

defaultUIElement: [Optional] specifies an empty HTMLDivElement, where the ImageEditorView UI will be dynamically loaded. If the parameter is omitted, the method will generate the UI without putting it on the page.

Return value

A promise that resolves with the initialized ImageEditorView instance.

Code Snippet

let imageEditorView = await Dynamsoft.DCE.ImageEditorView.createInstance();

or

<div id="enhancerUIContainer" style="width:1280px;height:720px;background:#ddd;" >
</div>
<script>
    // Create 'ImageEditorView' instance and pass an element as its UI.
    let imageEditorView = await Dynamsoft.DCE.ImageEditorView.createInstance(document.getElementById("enhancerUIContainer"));
</script>

dispose

Releases all resources used by the ImageEditorView instance.

dispose(): void;

Parameters

None.

Return value

None.

Code Snippet

let editorView = await Dynamsoft.DCE.ImageEditorView.createInstance();
//...
editorView.dispose();

disposed

Returns whether the ImageEditorView instance has been disposed of.

readonly disposed: boolean; 

Return value

Boolean indicating whether the ImageEditorView instance has been disposed of.

Code Snippet

let editorView = await Dynamsoft.DCE.ImageEditorView.createInstance();
//...
let flag = editorView.disposed;

getUIElement

Returns the HTMLDivElement, where the ImageEditorView UI is loaded.

getUIElement(): HTMLElement; 

Parameters

None.

Return value

The HTMLDivElement, where the ImageEditorView UI is loaded.

Code Snippet

const uiElement = imageEditorView.getUIElement();

setUIElement

Sets a specific HTMLDivElement, where the UI element for the ImageEditorView instance will be loaded.

setUIElement(UIElement: HTMLDivElement | string): Promise<void>;

Parameters

UIElement: the HTMLDivElement, where the UI element for the ImageEditorView instance will be loaded.

Return value

A promise that resolves once the new UI has been successfully loaded. It does not provide any value upon resolution.

Code Snippet

<div id="enhancerUIContainer" style="width: 100vw; height:70vh"></div>
<script>
    (async () => {
        await imageEditorView.setUIElement(document.getElementById("enhancerUIContainer"));
    })();
</script>

setOriginalImage

Sets the image to be drawn on the ImageEditorView.

setOriginalImage(image: DSImageData | HTMLCanvasElement | HTMLImageElement): void;

Parameters

image: the image to be drawn on the ImageEditorView.

Return value

None.

Code Snippet

let currentFrame = cameraEnhancer.fetchImage();
imageEditorView.setOriginalImage(currentFrame);

getOriginalImage

Returns the current image drawn on the ImageEditorView.

getOriginalImage(): DSImageData | HTMLCanvasElement | HTMLImageElement

Parameters

None.

Return value

The current image drawn on the ImageEditorView. The returned type will match the format of the image originally set via setOriginalImage().

Code Snippet

let image = imageEditorView.getOriginalImage();

createDrawingLayer

Creates a new DrawingLayer object and returns it.

createDrawingLayer(): DrawingLayer;

Parameters

None.

Return value

The created DrawingLayer object.

Code Snippet

const newDrawingLayer = imageEditorView.createDrawingLayer();

getDrawingLayer

Retrieves a DrawingLayer object by its unique identifier (ID).

getDrawingLayer(id: number): DrawingLayer | null;

Parameters

id: the unique identifier (ID) of the DrawingLayer object.

Return value

The DrawingLayer object specified by its unique identifier (ID) or null.

Code Snippet

retrievedDrawingLayer = imageEditorView.getDrawingLayer(layerId);

getAllDrawingLayers

Returns an array of all DrawingLayer objects managed by this DrawingLayerManager.

getAllDrawingLayers(): Array<DrawingLayer>;

Parameters

None.

Return value

An array of all DrawingLayer objects.

Code Snippet

DrawingLayers = imageEditorView.getAllDrawingLayers();

clearUserDefinedDrawingLayers

Clears all user-defined DrawingLayer objects.

clearUserDefinedDrawingLayers(): void;

Parameters

None.

Return value

None.

Code Snippet

imageEditorView.clearUserDefinedDrawingLayers();

deleteUserDefinedDrawingLayer

Deletes a user-defined DrawingLayer object specified by its unique identifier (ID).

deleteUserDefinedDrawingLayer(id: number): void;

Parameters

id: the unique identifier (ID) of the DrawingLayer object.

Return value

None.

Code Snippet

imageEditorView.deleteUserDefinedDrawingLayer(DrawingLayerId);

getSelectedDrawingItems

Asynchronously returns an array of all selected DrawingItem instances across different layers, supporting complex selection scenarios.

getSelectedDrawingItems(): Array<DrawingItem> | null;

Parameters

None.

Return value

An array of DrawingItem objects or null.

Code Snippet

let drawingItems = imageEditorView.getSelectedDrawingItems();

This page is compatible for:

Version 1.0

Is this page helpful?

YesYes NoNo

In this article:

latest version

  • Latest version(4.0.2)
  • Version 4.x
    • Version 4.0.1
    • Version 4.0.0
  • Version 3.x
    • Version 3.3.10
    • Version 3.3.9
    • Version 3.3.8
    • Version 3.3.7
    • Version 3.3.6
    • Version 3.3.5
    • Version 3.3.4
    • Version 3.3.3
    • Version 3.3.2
    • Version 3.3.1
    • Version 3.3.0
    • Version 3.2.0
    • Version 3.1.0
    • Version 3.0.1
    • Version 3.0.0
  • Version 2.x
    • Version 2.3.5
    • Version 2.3.2
    • Version 2.3.1
    • Version 2.3.0
    • Version 2.1.4
    • Version 2.1.3
    • Version 2.1.0
    • Version 2.0.0
Change +