# DsImageViewer ## Content # Class: DsImageViewer Document Solutions Image Viewer is a fast JavaScript based client-side Image Viewer that runs in all major browsers.

Note that DsImageViewer is the new name for GcImageViewer, with the same API.

During this transition period we are publishing both versions, but it is recommended that you switch to using DsImageViewer when possible.

## Example ```javascript const viewer = new DsImageViewer("#root"); ``` ## Extends - [`GcImageViewer`](GcImageViewer) ## Implements - [`ImageViewerAPI`](../interfaces/ImageViewerAPI) ## Constructors ### Constructor ```ts new DsImageViewer(element, options?): DsImageViewer; ``` ImageViewer constructor. #### Parameters ##### element Required. HTML element or CSS selector. `string` | `HTMLElement` ##### options? `Partial`<[`ViewerOptions`](../interfaces/ViewerOptions)> Optional. Viewer options. #### Returns `DsImageViewer` #### Inherited from [`GcImageViewer`](GcImageViewer).[`constructor`](GcImageViewer#constructor) ## Properties ### LicenseKey ```ts static LicenseKey: string; ``` Gets or sets the license key. #### Inherited from [`GcImageViewer`](GcImageViewer).[`LicenseKey`](GcImageViewer#licensekey) *** ### hasImage ```ts hasImage: boolean; ``` Indicates whether the viewer has opened the image. #### Example ```javascript const hasImageFlag = viewer.hasImage; ``` #### Implementation of [`ImageViewerAPI`](../interfaces/ImageViewerAPI).[`hasImage`](../interfaces/ImageViewerAPI#hasimage) #### Inherited from [`GcImageViewer`](GcImageViewer).[`hasImage`](GcImageViewer#hasimage) *** ### adaptiveNaturalSize ```ts adaptiveNaturalSize: Size; ``` Gets the active image DPI adaptive natural size. This is the image size that will be used to display the image at 100%. The adaptiveNaturalSize property is used for the actual size calculations. #### Implementation of [`ImageViewerAPI`](../interfaces/ImageViewerAPI).[`adaptiveNaturalSize`](../interfaces/ImageViewerAPI#adaptivenaturalsize) #### Inherited from [`GcImageViewer`](GcImageViewer).[`adaptiveNaturalSize`](GcImageViewer#adaptivenaturalsize) *** ### actualSize ```ts actualSize: Size; ``` Gets the actual display size of the active image, including the active zoom value. #### Implementation of [`ImageViewerAPI`](../interfaces/ImageViewerAPI).[`actualSize`](../interfaces/ImageViewerAPI#actualsize) #### Inherited from [`GcImageViewer`](GcImageViewer).[`actualSize`](GcImageViewer#actualsize) *** ### language ```ts language: string; ``` language - A property that retrieves the standardized language key based on the provided language option. The language key is determined by the `options.language` setting. #### Returns Standardized language key (e.g., 'en', 'ja'). #### Implementation of [`ImageViewerAPI`](../interfaces/ImageViewerAPI).[`language`](../interfaces/ImageViewerAPI#language) #### Inherited from [`GcImageViewer`](GcImageViewer).[`language`](GcImageViewer#language) *** ### layers ```ts layers: ImageLayer[]; ``` Image layers. Used for painting. #### Implementation of [`ImageViewerAPI`](../interfaces/ImageViewerAPI).[`layers`](../interfaces/ImageViewerAPI#layers) #### Inherited from [`GcImageViewer`](GcImageViewer).[`layers`](GcImageViewer#layers) *** ### naturalSize ```ts naturalSize: Size; ``` Gets the active image natural size. The natural size is the image's width/height if drawn with nothing constraining its width/height, this is the number of CSS pixels wide the image will be. #### Implementation of [`ImageViewerAPI`](../interfaces/ImageViewerAPI).[`naturalSize`](../interfaces/ImageViewerAPI#naturalsize) #### Inherited from [`GcImageViewer`](GcImageViewer).[`naturalSize`](GcImageViewer#naturalsize) *** ### openParameters ```ts openParameters: undefined | OpenParameters; ``` The Open parameters that were used to open an image. #### Implementation of [`ImageViewerAPI`](../interfaces/ImageViewerAPI).[`openParameters`](../interfaces/ImageViewerAPI#openparameters) #### Inherited from [`GcImageViewer`](GcImageViewer).[`openParameters`](GcImageViewer#openparameters) *** ### undoStorage ```ts undoStorage: UndoStorage; ``` Command based undo state storage. #### Example ```javascript const isUndoInProgress = viewer.undoStorage.undoInProgress; ``` #### Implementation of [`ImageViewerAPI`](../interfaces/ImageViewerAPI).[`undoStorage`](../interfaces/ImageViewerAPI#undostorage) #### Inherited from [`GcImageViewer`](GcImageViewer).[`undoStorage`](GcImageViewer#undostorage) *** ### hasUndo ```ts hasUndo: boolean; ``` Gets a value indicating whether the image viewer can undo changes. #### Example ```javascript if(viewer.hasUndo) { viewer.undo(); } ``` #### Implementation of [`ImageViewerAPI`](../interfaces/ImageViewerAPI).[`hasUndo`](../interfaces/ImageViewerAPI#hasundo) #### Inherited from [`GcImageViewer`](GcImageViewer).[`hasUndo`](GcImageViewer#hasundo) *** ### hasRedo ```ts hasRedo: boolean; ``` Gets a value indicating whether the image viewer can redo changes. #### Example ```javascript if(viewer.hasRedo) { viewer.redo(); } ``` #### Implementation of [`ImageViewerAPI`](../interfaces/ImageViewerAPI).[`hasRedo`](../interfaces/ImageViewerAPI#hasredo) #### Inherited from [`GcImageViewer`](GcImageViewer).[`hasRedo`](GcImageViewer#hasredo) *** ### undoIndex ```ts undoIndex: number; ``` Gets current undo level index. #### Example ```javascript alert("The current Undo level index is " + viewer.undoIndex); ``` #### Implementation of [`ImageViewerAPI`](../interfaces/ImageViewerAPI).[`undoIndex`](../interfaces/ImageViewerAPI#undoindex) #### Inherited from [`GcImageViewer`](GcImageViewer).[`undoIndex`](GcImageViewer#undoindex) *** ### undoCount ```ts undoCount: number; ``` Gets total undo levels count. #### Example ```javascript alert("Undo levels count is " + viewer.undoCount); ``` #### Implementation of [`ImageViewerAPI`](../interfaces/ImageViewerAPI).[`undoCount`](../interfaces/ImageViewerAPI#undocount) #### Inherited from [`GcImageViewer`](GcImageViewer).[`undoCount`](GcImageViewer#undocount) *** ### version ```ts version: string; ``` Returns the current version of the DS Image viewer. #### Example ```javascript alert("The DsImageViewer version is " + viewer.version); ``` #### Implementation of [`ImageViewerAPI`](../interfaces/ImageViewerAPI).[`version`](../interfaces/ImageViewerAPI#version) #### Inherited from [`GcImageViewer`](GcImageViewer).[`version`](GcImageViewer#version) *** ### framesCount ```ts framesCount: number; ``` Gets total frames count for the active image. Applicable for TIFF, ICO images. #### Example ```javascript const viewer = new DsImageViewer('#root'); viewer.onAfterOpen.register(function() { alert("The image opened. Total number of frames: " + viewer.framesCount); }); viewer.open('Test.png'); ``` #### Implementation of [`ImageViewerAPI`](../interfaces/ImageViewerAPI).[`framesCount`](../interfaces/ImageViewerAPI#framescount) #### Inherited from [`GcImageViewer`](GcImageViewer).[`framesCount`](GcImageViewer#framescount) *** ### eventBus ```ts eventBus: EventBus; ``` Image viewer event bus. #### Example ```javascript viewer.eventBus.on("after-open", function(args) { console.log("Image opened.", args); }); viewer.open('Test.png'); ``` #### Implementation of [`ImageViewerAPI`](../interfaces/ImageViewerAPI).[`eventBus`](../interfaces/ImageViewerAPI#eventbus) #### Inherited from [`GcImageViewer`](GcImageViewer).[`eventBus`](GcImageViewer#eventbus) *** ### onAfterOpen ```ts onAfterOpen: EventFan; ``` The event raised when the user changes the viewer theme. #### Example ```javascript const viewer = new DsImageViewer('#root'); viewer.onAfterOpen.register(function() { alert("The image opened."); }); viewer.open('Test.png'); ``` #### Implementation of [`ImageViewerAPI`](../interfaces/ImageViewerAPI).[`onAfterOpen`](../interfaces/ImageViewerAPI#onafteropen) #### Inherited from [`GcImageViewer`](GcImageViewer).[`onAfterOpen`](GcImageViewer#onafteropen) *** ### onBeforeOpen ```ts onBeforeOpen: EventFan; ``` Occurs immediately before the image opens. #### Example ```javascript const viewer = new DsImageViewer('#root'); viewer.onBeforeOpen.register(function(args) { alert("A new image will be opened,\n payload type(binary or URL): " + args.type +",\n payload(bytes or string): " + args.payload); }); viewer.open('Test.png'); ``` #### Implementation of [`ImageViewerAPI`](../interfaces/ImageViewerAPI).[`onBeforeOpen`](../interfaces/ImageViewerAPI#onbeforeopen) #### Inherited from [`GcImageViewer`](GcImageViewer).[`onBeforeOpen`](GcImageViewer#onbeforeopen) *** ### onError ```ts onError: EventFan; ``` The event indicating error. #### Example ```javascript function handleError(args) { console.error(args); } const viewer = new DsImageViewer('#root'); viewer.onError.register(handleError); viewer.open('Test.png'); ``` #### Implementation of [`ImageViewerAPI`](../interfaces/ImageViewerAPI).[`onError`](../interfaces/ImageViewerAPI#onerror) #### Inherited from [`GcImageViewer`](GcImageViewer).[`onError`](GcImageViewer#onerror) *** ### onImagePaint ```ts onImagePaint: EventFan; ``` The event raised when appearance image element changed. #### Implementation of [`ImageViewerAPI`](../interfaces/ImageViewerAPI).[`onImagePaint`](../interfaces/ImageViewerAPI#onimagepaint) #### Inherited from [`GcImageViewer`](GcImageViewer).[`onImagePaint`](GcImageViewer#onimagepaint) *** ### isAnimationStarted ```ts isAnimationStarted: boolean; ``` Gets a value indicating whether the image animation has started. #### Example ```javascript // Toggle image animation: const viewer = DsImageViewer.findControl("#root"); if(viewer.isAnimationStarted) { viewer.stopAnimation(); } else { viewer.startAnimation(); } ``` #### Implementation of [`ImageViewerAPI`](../interfaces/ImageViewerAPI).[`isAnimationStarted`](../interfaces/ImageViewerAPI#isanimationstarted) #### Inherited from [`GcImageViewer`](GcImageViewer).[`isAnimationStarted`](GcImageViewer#isanimationstarted) *** ### options ```ts options: Partial; ``` Viewer options #### Implementation of [`ImageViewerAPI`](../interfaces/ImageViewerAPI).[`options`](../interfaces/ImageViewerAPI#options) #### Inherited from [`GcImageViewer`](GcImageViewer).[`options`](GcImageViewer#options) *** ### toolbarLayout ```ts toolbarLayout: ImageToolbarLayout; ``` Defines the layout of the toolbar. The full list of the *viewer* specific toolbar items: ```javascript 'open', '$navigation', 'navigation-auto', '$split', 'zoom', '$fullscreen', 'save', 'about' ``` #### Example ```javascript // Customize the toolbar layout: viewer.toolbarLayout.viewer.default = ["open", "$zoom", "$fullscreen", "save", "print", "about"]; viewer.applyToolbarLayout(); ``` #### Implementation of [`ImageViewerAPI`](../interfaces/ImageViewerAPI).[`toolbarLayout`](../interfaces/ImageViewerAPI#toolbarlayout) #### Inherited from [`GcImageViewer`](GcImageViewer).[`toolbarLayout`](GcImageViewer#toolbarlayout) *** ### frameIndex ```ts frameIndex: number; ``` Gets or sets the active frame index. This is applicable for multi-frame images such as TIFF and ICO. When setting this value, it will also be used as the initial frame index when opening a new image. #### Example ```javascript const viewer = new DsImageViewer('#root'); viewer.frameIndex = 9; viewer.open('Test.ico'); ``` #### Implementation of [`ImageViewerAPI`](../interfaces/ImageViewerAPI).[`frameIndex`](../interfaces/ImageViewerAPI#frameindex) #### Inherited from [`GcImageViewer`](GcImageViewer).[`frameIndex`](GcImageViewer#frameindex) *** ### zoom ```ts zoom: ZoomSettings; ``` Gets or sets the current zoom settings #### Implementation of [`ImageViewerAPI`](../interfaces/ImageViewerAPI).[`zoom`](../interfaces/ImageViewerAPI#zoom) #### Inherited from [`GcImageViewer`](GcImageViewer).[`zoom`](GcImageViewer#zoom) ## Methods ### findControl() ```ts static findControl(selector): undefined | ImageViewerAPI; ``` Gets the viewer instance using the host element or host element selector. #### Parameters ##### selector Root HTML element or its CSS selector `string` | `HTMLElement` #### Returns `undefined` \| [`ImageViewerAPI`](../interfaces/ImageViewerAPI) Image Viewer instance if found #### Example ```javascript const viewer = DsImageViewer.findControl("#root"); ``` #### Inherited from [`GcImageViewer`](GcImageViewer).[`findControl`](GcImageViewer#findcontrol) *** ### ensurePaintLayer() ```ts ensurePaintLayer(): ImageLayer; ``` Create at least one image layer which will be used for painting. #### Returns [`ImageLayer`](../interfaces/ImageLayer) #### Implementation of [`ImageViewerAPI`](../interfaces/ImageViewerAPI).[`ensurePaintLayer`](../interfaces/ImageViewerAPI#ensurepaintlayer) #### Inherited from [`GcImageViewer`](GcImageViewer).[`ensurePaintLayer`](GcImageViewer#ensurepaintlayer) *** ### removeLayer() ```ts removeLayer(layerOrIndex): void; ``` Remove and dispose image layer given by argument layerOrIndex. #### Parameters ##### layerOrIndex Image layer or image layer index or image layer name. `string` | `number` | [`ImageLayer`](../interfaces/ImageLayer) #### Returns `void` #### Implementation of [`ImageViewerAPI`](../interfaces/ImageViewerAPI).[`removeLayer`](../interfaces/ImageViewerAPI#removelayer) #### Inherited from [`GcImageViewer`](GcImageViewer).[`removeLayer`](GcImageViewer#removelayer) *** ### removeLayers() ```ts removeLayers(): void; ``` Remove and dispose all image layers. #### Returns `void` #### Implementation of [`ImageViewerAPI`](../interfaces/ImageViewerAPI).[`removeLayers`](../interfaces/ImageViewerAPI#removelayers) #### Inherited from [`GcImageViewer`](GcImageViewer).[`removeLayers`](GcImageViewer#removelayers) *** ### applyOptions() ```ts applyOptions(): void; ``` Call this method in order to apply changed options. #### Returns `void` #### Example ```javascript viewer.applyOptions(); ``` #### Implementation of [`ImageViewerAPI`](../interfaces/ImageViewerAPI).[`applyOptions`](../interfaces/ImageViewerAPI#applyoptions) #### Inherited from [`GcImageViewer`](GcImageViewer).[`applyOptions`](GcImageViewer#applyoptions) *** ### applyToolbarLayout() ```ts applyToolbarLayout(): void; ``` Call this method in order to apply changes in @see:toolbarLayout. #### Returns `void` #### Examples ```javascript viewer.toolbarLayout.viewer.default = ["open", "save"]; viewer.applyToolbarLayout(); ``` ```javascript const viewer = new DsImageViewer(document.querySelector("#viewer")); const toolbar = viewer.toolbar; const toolbarLayout = viewer.toolbarLayout; toolbar.addItem({ key: 'custom-action', icon: { type: "svg", content: '' }, title: 'Custom action', checked: false, enabled: false, action: function () { alert("Implement your action here."); }, onUpdate: function (args) { return { enabled: true, checked: false, title: 'Custom action title' } } }); toolbarLayout.viewer.default.splice(0, 0, "custom-action"); viewer.applyToolbarLayout(); ``` #### Implementation of [`ImageViewerAPI`](../interfaces/ImageViewerAPI).[`applyToolbarLayout`](../interfaces/ImageViewerAPI#applytoolbarlayout) #### Inherited from [`GcImageViewer`](GcImageViewer).[`applyToolbarLayout`](GcImageViewer#applytoolbarlayout) *** ### addPlugin() ```ts addPlugin(plugin): boolean; ``` Adds a plugin instance to the `DsImageViewer`. This method is now intended for internal and officially supported plugins only. Custom or third-party plugins are **no longer supported** starting from version 9.0. The plugin system remains available for internal use to provide optional viewer features, such as `ImageFiltersPlugin`, `PageToolsPlugin`, and `PaintToolsPlugin`. Attempting to register non-official plugins may lead to undefined behavior and is not supported by the product team. #### Parameters ##### plugin [`ImageViewerPluginReference`](../interfaces/ImageViewerPluginReference) The plugin instance #### Returns `boolean` `true` if added successfully; otherwise `false`. #### Example ```javascript // ✅ Supported (built-in plugin) const viewer = new DsImageViewer("#root"); viewer.addPlugin(new ImageFiltersPlugin()); // ❌ Not supported (custom plugin) viewer.addPlugin(new CustomPlugin()); // Custom plugins are no longer supported ``` #### Implementation of [`ImageViewerAPI`](../interfaces/ImageViewerAPI).[`addPlugin`](../interfaces/ImageViewerAPI#addplugin) #### Inherited from [`GcImageViewer`](GcImageViewer).[`addPlugin`](GcImageViewer#addplugin) *** ### addKeyboardListener() ```ts addKeyboardListener(uniqueKey, handler): void; ``` Add window keyboard listener. #### Parameters ##### uniqueKey `string` Listener key. ##### handler [`WindowKeyboardListener`](../interfaces/WindowKeyboardListener) Keyboard event handler. #### Returns `void` #### Implementation of [`ImageViewerAPI`](../interfaces/ImageViewerAPI).[`addKeyboardListener`](../interfaces/ImageViewerAPI#addkeyboardlistener) #### Inherited from [`GcImageViewer`](GcImageViewer).[`addKeyboardListener`](GcImageViewer#addkeyboardlistener) *** ### removeKeyboardListener() ```ts removeKeyboardListener(uniqueKey): void; ``` Remove window keyboard listener. #### Parameters ##### uniqueKey `string` Listener key. #### Returns `void` #### Implementation of [`ImageViewerAPI`](../interfaces/ImageViewerAPI).[`removeKeyboardListener`](../interfaces/ImageViewerAPI#removekeyboardlistener) #### Inherited from [`GcImageViewer`](GcImageViewer).[`removeKeyboardListener`](GcImageViewer#removekeyboardlistener) *** ### configurePluginMainToolbar() ```ts configurePluginMainToolbar(pos, buttonsToInsert): void; ``` Allows to configure the main toolbar layout. #### Parameters ##### pos The position where the buttons should be inserted. Use `false` or `-1` to skip insertion. Undefined means the position will be determined automatically. `undefined` | `number` | `boolean` ##### buttonsToInsert `string`[] An array of button keys to be inserted. #### Returns `void` #### Example ```ts // Apply a custom layout to insert "zoomIn" and "zoomOut" buttons at position 2 for the "PaintTools" plugin. viewer.configurePluginMainToolbar(2, ["zoomIn", "zoomOut"]); ``` #### Implementation of [`ImageViewerAPI`](../interfaces/ImageViewerAPI).[`configurePluginMainToolbar`](../interfaces/ImageViewerAPI#configurepluginmaintoolbar) #### Inherited from [`GcImageViewer`](GcImageViewer).[`configurePluginMainToolbar`](GcImageViewer#configurepluginmaintoolbar) *** ### getEventCanvasPoint() ```ts getEventCanvasPoint(event, includeDpi): PointLocation; ``` Retrieves the point location from the pointer event provided by the 'event' parameter. The returned point is relative to the active canvas element. #### Parameters ##### event DOM Pointer or Mouse event object. `MouseEvent` | `PointerEvent` ##### includeDpi `boolean` #### Returns [`PointLocation`](../interfaces/PointLocation) #### Implementation of [`ImageViewerAPI`](../interfaces/ImageViewerAPI).[`getEventCanvasPoint`](../interfaces/ImageViewerAPI#geteventcanvaspoint) #### Inherited from [`GcImageViewer`](GcImageViewer).[`getEventCanvasPoint`](GcImageViewer#geteventcanvaspoint) *** ### setCursor() ```ts setCursor(cursorType): void; ``` Sets the cursor style for the image viewer #### Parameters ##### cursorType [`GlobalCursorType`](../type-aliases/GlobalCursorType) The cursor style to apply #### Returns `void` #### Examples ```ts // Set rotate cursor during image rotation viewer.setCursor('rotate'); ``` ```ts // Set resize cursor when hovering over edges viewer.setCursor('nwse-resize'); ``` #### See GlobalCursorType for all available cursor options #### Implementation of [`ImageViewerAPI`](../interfaces/ImageViewerAPI).[`setCursor`](../interfaces/ImageViewerAPI#setcursor) #### Inherited from [`GcImageViewer`](GcImageViewer).[`setCursor`](GcImageViewer#setcursor) *** ### resetCursor() ```ts resetCursor(): void; ``` Resets the cursor to default style #### Returns `void` #### Examples ```ts // Reset cursor when operation completes viewer.resetCursor(); ``` ```ts // Reset cursor on mouse leave viewerElement.addEventListener('mouseleave', () => { viewer.resetCursor(); }); ``` #### Implementation of [`ImageViewerAPI`](../interfaces/ImageViewerAPI).[`resetCursor`](../interfaces/ImageViewerAPI#resetcursor) #### Inherited from [`GcImageViewer`](GcImageViewer).[`resetCursor`](GcImageViewer#resetcursor) *** ### toggleCursor() ```ts toggleCursor(cursorType): void; ``` Toggles between specified cursor and default style #### Parameters ##### cursorType Cursor style to apply, or false to reset `false` | [`GlobalCursorType`](../type-aliases/GlobalCursorType) #### Returns `void` #### Examples ```ts // Toggle grab cursor during drag operations viewer.toggleCursor(isDragging ? 'grab' : false); ``` ```ts // Toggle zoom cursor based on modifier key document.addEventListener('keydown', (e) => { if (e.ctrlKey) { viewer.toggleCursor('zoom-in'); } }); ``` #### Implementation of [`ImageViewerAPI`](../interfaces/ImageViewerAPI).[`toggleCursor`](../interfaces/ImageViewerAPI#togglecursor) #### Inherited from [`GcImageViewer`](GcImageViewer).[`toggleCursor`](GcImageViewer#togglecursor) *** ### dataUrlToImageData() ```ts dataUrlToImageData(dataUrl, destinationSize?): Promise; ``` Load image data using given data url. #### Parameters ##### dataUrl `string` ##### destinationSize? [`Size`](../interfaces/Size) Defines needed image size #### Returns `Promise`<`ImageData`> #### Implementation of [`ImageViewerAPI`](../interfaces/ImageViewerAPI).[`dataUrlToImageData`](../interfaces/ImageViewerAPI#dataurltoimagedata) #### Inherited from [`GcImageViewer`](GcImageViewer).[`dataUrlToImageData`](GcImageViewer#dataurltoimagedata) *** ### confirm() ```ts confirm( confirmationText?, level?, title?, buttons?): Promise; ``` Display confirmation dialog. #### Parameters ##### confirmationText? `any` Confirmation text can be plain string or JSX.Element if you're using React. ##### level? `"error"` | `"info"` | `"warning"` ##### title? `string` ##### buttons? [`ConfirmButton`](../type-aliases/ConfirmButton)[] #### Returns `Promise`<`boolean` \| [`ConfirmButton`](../type-aliases/ConfirmButton)> #### Example ```javascript const confirmResult = await viewer.confirm("Apply changes?", "info", "Confirm action", ["Yes", "No", "Cancel"]); if (confirmResult === "Yes") { // put your code here } else if (confirmResult === "No") { // put your code here } else { // put your code here } ``` #### Implementation of [`ImageViewerAPI`](../interfaces/ImageViewerAPI).[`confirm`](../interfaces/ImageViewerAPI#confirm) #### Inherited from [`GcImageViewer`](GcImageViewer).[`confirm`](GcImageViewer#confirm) *** ### removePlugin() ```ts removePlugin(pluginId): void; ``` Removes a plugin instance from the `DsImageViewer`. This method remains available for internal and officially supported plugins only. Custom or third-party plugins are **no longer supported** starting from version 9.0. #### Parameters ##### pluginId Plugin id or plugin instance. [`ImageViewerPluginReference`](../interfaces/ImageViewerPluginReference) | [`PluginType`](../type-aliases/PluginType) #### Returns `void` #### Example ```javascript // ✅ Supported viewer.removePlugin("ImageFiltersPlugin"); // ❌ Not supported viewer.removePlugin("CustomPluginId"); ``` #### Implementation of [`ImageViewerAPI`](../interfaces/ImageViewerAPI).[`removePlugin`](../interfaces/ImageViewerAPI#removeplugin) #### Inherited from [`GcImageViewer`](GcImageViewer).[`removePlugin`](GcImageViewer#removeplugin) *** ### showAbout() ```ts showAbout(): void; ``` Show about dialog. #### Returns `void` #### Implementation of [`ImageViewerAPI`](../interfaces/ImageViewerAPI).[`showAbout`](../interfaces/ImageViewerAPI#showabout) #### Inherited from [`GcImageViewer`](GcImageViewer).[`showAbout`](GcImageViewer#showabout) *** ### findPlugin() ```ts findPlugin(pluginId): | null | ImageViewerPluginReference; ``` Finds a viewer plugin by its id. #### Parameters ##### pluginId [`PluginType`](../type-aliases/PluginType) Plugin id #### Returns \| `null` \| [`ImageViewerPluginReference`](../interfaces/ImageViewerPluginReference) #### Example ```javascript // find imageFilters plugin: const imageFilters = viewer.findPlugin("imageFilters"); // find pageTools plugin: const pageTools = viewer.findPlugin("pageTools"); ``` #### Implementation of [`ImageViewerAPI`](../interfaces/ImageViewerAPI).[`findPlugin`](../interfaces/ImageViewerAPI#findplugin) #### Inherited from [`GcImageViewer`](GcImageViewer).[`findPlugin`](GcImageViewer#findplugin) *** ### removePlugins() ```ts removePlugins(): void; ``` Remove all plug-ins. #### Returns `void` #### Example ```javascript viewer.removePlugins(); ``` #### Implementation of [`ImageViewerAPI`](../interfaces/ImageViewerAPI).[`removePlugins`](../interfaces/ImageViewerAPI#removeplugins) #### Inherited from [`GcImageViewer`](GcImageViewer).[`removePlugins`](GcImageViewer#removeplugins) *** ### clearUndo() ```ts clearUndo(): void; ``` Clear undo storage. #### Returns `void` #### Implementation of [`ImageViewerAPI`](../interfaces/ImageViewerAPI).[`clearUndo`](../interfaces/ImageViewerAPI#clearundo) #### Inherited from [`GcImageViewer`](GcImageViewer).[`clearUndo`](GcImageViewer#clearundo) *** ### executeCommand() ```ts executeCommand(command): Promise; ``` Execute a new command. #### Parameters ##### command [`UndoCommandSupport`](../interfaces/UndoCommandSupport) Instance of a command. #### Returns `Promise`<`void`> #### Implementation of [`ImageViewerAPI`](../interfaces/ImageViewerAPI).[`executeCommand`](../interfaces/ImageViewerAPI#executecommand) #### Inherited from [`GcImageViewer`](GcImageViewer).[`executeCommand`](GcImageViewer#executecommand) *** ### newImage() ```ts newImage(options?): Promise; ``` Create new empty image. #### Parameters ##### options? `Partial`<[`Size`](../interfaces/Size)> & [`OpenParameters`](../type-aliases/OpenParameters) Optional. New image parameters. #### Returns `Promise`<`any`> #### Example ```javascript await viewer.newImage({ width: 300, height: 300, fileName: "myImage.png" }); ``` #### Implementation of [`ImageViewerAPI`](../interfaces/ImageViewerAPI).[`newImage`](../interfaces/ImageViewerAPI#newimage) #### Inherited from [`GcImageViewer`](GcImageViewer).[`newImage`](GcImageViewer#newimage) *** ### open() ```ts open(file, openParameters?): Promise; ``` Open Image document. #### Parameters ##### file Image URL or it's binary data. `string` | `URL` | `Uint8Array`<`ArrayBufferLike`> ##### openParameters? Image format or image opening parameters object. [`OpenParameters`](../type-aliases/OpenParameters) | `ImageFormatCode` | [`ImageFormatName`](../type-aliases/ImageFormatName) #### Returns `Promise`<`any`> #### Example ```javascript viewer.open("Images/HelloWorld.png"); ``` #### Implementation of [`ImageViewerAPI`](../interfaces/ImageViewerAPI).[`open`](../interfaces/ImageViewerAPI#open) #### Inherited from [`GcImageViewer`](GcImageViewer).[`open`](GcImageViewer#open) *** ### close() ```ts close(): Promise; ``` Closes the currently open image. #### Returns `Promise`<`void`> #### Example ```javascript await viewer.close(); ``` #### Implementation of [`ImageViewerAPI`](../interfaces/ImageViewerAPI).[`close`](../interfaces/ImageViewerAPI#close) #### Inherited from [`GcImageViewer`](GcImageViewer).[`close`](GcImageViewer#close) *** ### dispose() ```ts dispose(): void; ``` Use this method to close and release resources occupied by the DsImageViewer. #### Returns `void` #### Implementation of [`ImageViewerAPI`](../interfaces/ImageViewerAPI).[`dispose`](../interfaces/ImageViewerAPI#dispose) #### Inherited from [`GcImageViewer`](GcImageViewer).[`dispose`](GcImageViewer#dispose) *** ### showActivitySpinner() ```ts showActivitySpinner(container?): void; ``` Show activity spinner. #### Parameters ##### container? `HTMLElement` #### Returns `void` #### Example ```javascript viewer.showActivitySpinner(); ``` #### Implementation of [`ImageViewerAPI`](../interfaces/ImageViewerAPI).[`showActivitySpinner`](../interfaces/ImageViewerAPI#showactivityspinner) #### Inherited from [`GcImageViewer`](GcImageViewer).[`showActivitySpinner`](GcImageViewer#showactivityspinner) *** ### hideActivitySpinner() ```ts hideActivitySpinner(): void; ``` Hide activity spinner. #### Returns `void` #### Example ```javascript viewer.hideActivitySpinner(); ``` #### Implementation of [`ImageViewerAPI`](../interfaces/ImageViewerAPI).[`hideActivitySpinner`](../interfaces/ImageViewerAPI#hideactivityspinner) #### Inherited from [`GcImageViewer`](GcImageViewer).[`hideActivitySpinner`](GcImageViewer#hideactivityspinner) *** ### startAnimation() ```ts startAnimation(): void; ``` Start GIF animation. #### Returns `void` #### Example ```javascript DsImageViewer.findControl("#root").startAnimation(); ``` #### Implementation of [`ImageViewerAPI`](../interfaces/ImageViewerAPI).[`startAnimation`](../interfaces/ImageViewerAPI#startanimation) #### Inherited from [`GcImageViewer`](GcImageViewer).[`startAnimation`](GcImageViewer#startanimation) *** ### stopAnimation() ```ts stopAnimation(): void; ``` Stop GIF animation. * #### Returns `void` #### Example * ```javascript * DsImageViewer.findControl("#root").stopAnimation(); * ``` * #### Implementation of [`ImageViewerAPI`](../interfaces/ImageViewerAPI).[`stopAnimation`](../interfaces/ImageViewerAPI#stopanimation) #### Inherited from [`GcImageViewer`](GcImageViewer).[`stopAnimation`](GcImageViewer#stopanimation) *** ### toggleAnimation() ```ts toggleAnimation(): void; ``` Toggle GIF animation. #### Returns `void` #### Example ```javascript DsImageViewer.findControl("#root").toggleAnimation(); ``` #### Implementation of [`ImageViewerAPI`](../interfaces/ImageViewerAPI).[`toggleAnimation`](../interfaces/ImageViewerAPI#toggleanimation) #### Inherited from [`GcImageViewer`](GcImageViewer).[`toggleAnimation`](GcImageViewer#toggleanimation) *** ### undo() ```ts undo(): Promise; ``` Undo changes. #### Returns `Promise`<`void`> #### Example ```javascript if(viewer.hasUndo) { viewer.undo(); } ``` #### Implementation of [`ImageViewerAPI`](../interfaces/ImageViewerAPI).[`undo`](../interfaces/ImageViewerAPI#undo) #### Inherited from [`GcImageViewer`](GcImageViewer).[`undo`](GcImageViewer#undo) *** ### redo() ```ts redo(): Promise; ``` Redo changes. #### Returns `Promise`<`void`> #### Example ```javascript if(viewer.hasRedo) { viewer.redo(); } ``` #### Implementation of [`ImageViewerAPI`](../interfaces/ImageViewerAPI).[`redo`](../interfaces/ImageViewerAPI#redo) #### Inherited from [`GcImageViewer`](GcImageViewer).[`redo`](GcImageViewer#redo) *** ### getEvent() ```ts getEvent(eventName): EventFan; ``` Get event object. #### Parameters ##### eventName `string` Embedded or custom event name. #### Returns [`EventFan`](../interfaces/EventFan) #### Example ```javascript viewer.getEvent("CustomEvent").register(function(args) { console.log(args); }); ``` #### Implementation of [`ImageViewerAPI`](../interfaces/ImageViewerAPI).[`getEvent`](../interfaces/ImageViewerAPI#getevent) #### Inherited from [`GcImageViewer`](GcImageViewer).[`getEvent`](GcImageViewer#getevent) *** ### triggerEvent() ```ts triggerEvent(eventName, args?): void; ``` Trigger event. #### Parameters ##### eventName `string` Embedded or custom event name. ##### args? `Record`<`string`, `unknown`> Arguments for event handler function. #### Returns `void` #### Example ```javascript // Listen CustomEvent: viewer.getEvent("CustomEvent").register(function(args) { console.log(args); }); // Trigger CustomEvent: viewer.triggerEvent("CustomEvent", { arg1: 1, arg2: 2}); ``` #### Implementation of [`ImageViewerAPI`](../interfaces/ImageViewerAPI).[`triggerEvent`](../interfaces/ImageViewerAPI#triggerevent) #### Inherited from [`GcImageViewer`](GcImageViewer).[`triggerEvent`](GcImageViewer#triggerevent) *** ### getOriginalImageDataUrl() ```ts getOriginalImageDataUrl(): string; ``` Get unmodified current image data url. #### Returns `string` #### Implementation of [`ImageViewerAPI`](../interfaces/ImageViewerAPI).[`getOriginalImageDataUrl`](../interfaces/ImageViewerAPI#getoriginalimagedataurl) #### Inherited from [`GcImageViewer`](GcImageViewer).[`getOriginalImageDataUrl`](GcImageViewer#getoriginalimagedataurl) *** ### getImageDataUrl() ```ts getImageDataUrl(): string; ``` Get current image data url. #### Returns `string` #### Implementation of [`ImageViewerAPI`](../interfaces/ImageViewerAPI).[`getImageDataUrl`](../interfaces/ImageViewerAPI#getimagedataurl) #### Inherited from [`GcImageViewer`](GcImageViewer).[`getImageDataUrl`](GcImageViewer#getimagedataurl) *** ### setImageDataUrl() ```ts setImageDataUrl(dataUrl): Promise; ``` Modify current image data url. #### Parameters ##### dataUrl `any` #### Returns `Promise`<`void`> #### Implementation of [`ImageViewerAPI`](../interfaces/ImageViewerAPI).[`setImageDataUrl`](../interfaces/ImageViewerAPI#setimagedataurl) #### Inherited from [`GcImageViewer`](GcImageViewer).[`setImageDataUrl`](GcImageViewer#setimagedataurl) *** ### showSecondToolbar() ```ts showSecondToolbar(toolbarKey): Promise; ``` Displays a second toolbar specified by the toolbarKey argument. #### Parameters ##### toolbarKey [`SecondToolbarType`](../type-aliases/SecondToolbarType) The key identifying the specific second toolbar to show. #### Returns `Promise`<`void`> A Promise that resolves once the second toolbar is successfully displayed. #### Example ```javascript // Show the page tools toolbar viewer.showSecondToolbar("page-tools"); ``` #### Implementation of [`ImageViewerAPI`](../interfaces/ImageViewerAPI).[`showSecondToolbar`](../interfaces/ImageViewerAPI#showsecondtoolbar) #### Inherited from [`GcImageViewer`](GcImageViewer).[`showSecondToolbar`](GcImageViewer#showsecondtoolbar) *** ### hideSecondToolbar() ```ts hideSecondToolbar(toolbarKey?): Promise; ``` Hides the second toolbar. This method deactivates any active editor mode associated with the second toolbar and then hides the toolbar itself. #### Parameters ##### toolbarKey? [`SecondToolbarType`](../type-aliases/SecondToolbarType) Optional. The key identifying the specific second toolbar to hide. If provided, only hides the specified toolbar if it exists. #### Returns `Promise`<`void`> A Promise that resolves once the second toolbar is successfully hidden. #### Examples ```javascript // Hide the second toolbar viewer.hideSecondToolbar(); ``` ```javascript // Hide a specific second toolbar by passing its key viewer.hideSecondToolbar("page-tools"); ``` #### Implementation of [`ImageViewerAPI`](../interfaces/ImageViewerAPI).[`hideSecondToolbar`](../interfaces/ImageViewerAPI#hidesecondtoolbar) #### Inherited from [`GcImageViewer`](GcImageViewer).[`hideSecondToolbar`](GcImageViewer#hidesecondtoolbar) *** ### openLocalFile() ```ts openLocalFile(): void; ``` Show the file open dialog where the user can select the Image file. #### Returns `void` #### Example ```javascript viewer.openLocalFile(); ``` #### Implementation of [`ImageViewerAPI`](../interfaces/ImageViewerAPI).[`openLocalFile`](../interfaces/ImageViewerAPI#openlocalfile) #### Inherited from [`GcImageViewer`](GcImageViewer).[`openLocalFile`](GcImageViewer#openlocalfile) *** ### save() ```ts save(options?, original?): void; ``` Saves the Image document loaded in the Viewer to the local disk. #### Parameters ##### options? Optional Destination file name or the save options, including the destination file name and other settings. `string` | [`SaveOptions`](../type-aliases/SaveOptions) ##### original? `boolean` Optional Flag indicating whether to use the initial version of the image for save. Defaults to `false`. #### Returns `void` #### Examples ```javascript // Example: Save the modified image without using specific options. const viewer = DsImageViewer.findControl("#root"); viewer.save(); ``` ```javascript // Example: Save the modified image as "image.png". const viewer = DsImageViewer.findControl("#root"); viewer.save({ fileName: "image.png" }); ``` ```javascript // Example: Download the original version of the image as "original_image.jpg". const viewer = DsImageViewer.findControl("#root"); viewer.save({ fileName: "original_image.jpg", original: true }); ``` ```javascript // Example: Save the modified image in PNG format. const viewer = DsImageViewer.findControl("#root"); viewer.save({ convertToFormat: "image/png" }); ``` ```javascript // Example: Save the modified image with a custom file name and in JPEG format. const viewer = DsImageViewer.findControl("#root"); viewer.save({ fileName: "custom_name", convertToFormat: "image/jpeg" }); ``` #### Implementation of [`ImageViewerAPI`](../interfaces/ImageViewerAPI).[`save`](../interfaces/ImageViewerAPI#save) #### Inherited from [`GcImageViewer`](GcImageViewer).[`save`](GcImageViewer#save) *** ### showMessage() ```ts showMessage( message, details, severity): void; ``` Shows the message for the user. #### Parameters ##### message `string` Message title text ##### details `string` Additional details text, empty by default. ##### severity Message severity, default "info". `"error"` | `"info"` | `"warn"` | `"debug"` #### Returns `void` #### Implementation of [`ImageViewerAPI`](../interfaces/ImageViewerAPI).[`showMessage`](../interfaces/ImageViewerAPI#showmessage) #### Inherited from [`GcImageViewer`](GcImageViewer).[`showMessage`](GcImageViewer#showmessage)