Document Solutions Image Viewer - v7.2.0 / IImageViewer

Interface: IImageViewer

Interface describing the ImageViewer API, primarily utilized for control/plugin development purposes.

Implemented by

• GcImageViewer

Table of contents

Methods

• showPanel
• updatePanel
• getPanelState
• layoutPanels
• save
• toggleFullscreen
• toggleToolbar
• applyToolbarLayout
• addKeyboardListener
• removeKeyboardListener
• configurePluginMainToolbar
• dataUrlToImageData
• ensurePaintLayer
• findPlugin
• getEventCanvasPoint
• getImageDataUrl
• setImageDataUrl
• showActivitySpinner
• hideActivitySpinner
• confirm
• getOriginalImageDataUrl
• removeLayer
• removeLayers
• showSecondToolbar

Accessors

• isFullscreen
• isToolbarHidden
• eventBus
• hasImage
• imageFormat
• layers
• naturalSize
• undoStorage
• hostElement

Properties

• toggleSidebar
• toolbarLayout
• in17n

Methods

showPanel

▸ showPanel(panelKey, visible?): void

Updates the panel visibility.

Parameters

Name	Type
panelKey	PanelHandle
visible?	boolean

Returns

void

---

updatePanel

▸ updatePanel(panelKey, settings): void

Updates panel settings such as visibility, label or "enabled" status.

Parameters

Name	Type
panelKey	PanelHandle
settings	Partial<PanelSettings>

Returns

void

---

getPanelState

▸ getPanelState(panelKey): null | PanelSettings

Gets the current panel state.

Parameters

Name	Type
panelKey	PanelHandle

Returns

null | PanelSettings

---

layoutPanels

▸ layoutPanels(layout): void

Orders and filters panel items. '*' indicates "the rest of panels". 'sep'/'separator' indicated menu separator.

Parameters

Name	Type
layout	string[]

Returns

void

---

save

▸ save(options?, original?): void

Saves the Image document loaded in the Viewer to the local disk.

Example

// Example: Save the modified image without using specific options.
const viewer = DsImageViewer.findControl("#root");
viewer.save();

Example

// Example: Save the modified image as "image.png".
const viewer = DsImageViewer.findControl("#root");
viewer.save({ fileName: "image.png" });

Example

// 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 });

Example

// Example: Save the modified image in PNG format.
const viewer = DsImageViewer.findControl("#root");
viewer.save({ convertToFormat: "image/png" });

Example

// 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" });

Parameters

Name	Type	Description
options?	string | SaveOptions	The save options, including the destination file name and other settings.
original?	boolean	Flag indicating whether to use the initial version of the image for save. Defaults to false.

Returns

void

---

toggleFullscreen

▸ toggleFullscreen(fullscreen?): void

Toggle full screen mode.

Parameters

Name	Type
fullscreen?	boolean

Returns

void

---

toggleToolbar

▸ toggleToolbar(show?): void

Toggle toolbar visibility.

Parameters

Name	Type
show?	boolean

Returns

void

---

applyToolbarLayout

▸ applyToolbarLayout(): any

Call this method in order to apply changes in @see:toolbarLayout.

Example

viewer.toolbarLayout.viewer.default = ["open", "save"];
viewer.applyToolbarLayout();

Example

   var viewer = new GcImageViewer(document.querySelector("#viewer"));
   var toolbar = viewer.toolbar;
   var toolbarLayout = viewer.toolbarLayout;
   toolbar.addItem({
       key: 'custom-action',
       icon: { type: "svg", content: '<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="24" height="24" viewBox="0 0 24 24"><path style="fill: #205F78;" d="M20.25 12l-2.25 2.25 2.25 2.25-3.75 3.75-2.25-2.25-2.25 2.25-2.25-2.25-2.25 2.25-3.75-3.75 2.25-2.25-2.25-2.25 2.25-2.25-2.25-2.25 3.75-3.75 2.25 2.25 2.25-2.25 2.25 2.25 2.25-2.25 3.75 3.75-2.25 2.25 2.25 2.25z"></path></svg>' },
       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();

Returns

any

---

addKeyboardListener

▸ addKeyboardListener(uniqueKey, handler): any

Add window keyboard listener.

Parameters

Name	Type
uniqueKey	string
handler	WindowKeyboardListener

Returns

any

---

removeKeyboardListener

▸ removeKeyboardListener(uniqueKey): any

Remove window keyboard listener.

Parameters

Name	Type
uniqueKey	string

Returns

any

---

configurePluginMainToolbar

▸ configurePluginMainToolbar(pos, buttonsToInsert): any

Used preliminarily by the plugin developers to configure the main toolbar layout.

Example

// Apply a custom layout to insert "zoomIn" and "zoomOut" buttons at position 2 for the "PaintTools" plugin.
viewer.configurePluginMainToolbar(2, ["zoomIn", "zoomOut"]);

Parameters

Name	Type	Description
pos	undefined | number | boolean	The position where the buttons should be inserted. Use false or -1 to skip insertion. Undefined means the position will be determined automatically.
buttonsToInsert	string[]	An array of button keys to be inserted.

Returns

any

void

---

dataUrlToImageData

▸ dataUrlToImageData(dataUrl, destinationSize?): Promise<ImageData>

Load image data using given data url.

Parameters

Name	Type
dataUrl	string
destinationSize?	Object
destinationSize.width	number
destinationSize.height	number

Returns

Promise<ImageData>

---

ensurePaintLayer

▸ ensurePaintLayer(): IImageLayer

Create at least one image layer which will be used for painting.

Returns

IImageLayer

---

findPlugin

▸ findPlugin(pluginId): null | IViewerPlugin

Finds a viewer plugin by its id.

Example

// find imageFilters plugin:
var imageFilters = viewer.findPlugin("imageFilters");
// find pageTools plugin:
var pageTools = viewer.findPlugin("pageTools");

Parameters

Name	Type
pluginId	string

Returns

null | IViewerPlugin

---

getEventCanvasPoint

▸ getEventCanvasPoint(event): 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

Name	Type	Description
event	PointerEvent | MouseEvent	DOM Pointer or Mouse event object.

Returns

PointLocation

---

getImageDataUrl

▸ getImageDataUrl(): string

Get current image data url.

Returns

string

---

setImageDataUrl

▸ setImageDataUrl(dataUrl): Promise<void>

Modify current image data url.

Parameters

Name	Type
dataUrl	any

Returns

Promise<void>

---

showActivitySpinner

▸ showActivitySpinner(container?): any

Show activity spinner.

Example

viewer.showActivitySpinner();

Parameters

Name	Type
container?	HTMLElement

Returns

any

---

hideActivitySpinner

▸ hideActivitySpinner(): any

Hide activity spinner.

Example

viewer.hideActivitySpinner();

Returns

any

---

confirm

▸ confirm(confirmationText?, level?, title?, buttons?): Promise<boolean | ConfirmButton>

Display confirmation dialog.

Parameters

Name	Type
confirmationText?	string | Element
level?	"error" | "info" | "warning"
title?	string
buttons?	ConfirmButton[]

Returns

Promise<boolean | ConfirmButton>

---

getOriginalImageDataUrl

▸ getOriginalImageDataUrl(): string

Get unmodified current image data url.

Returns

string

---

removeLayer

▸ removeLayer(layerOrIndex): any

Remove and dispose image layer given by argument layerOrIndex.

Parameters

Name	Type	Description
layerOrIndex	number | IImageLayer	Image layer or image layer index or image layer name.

Returns

any

---

removeLayers

▸ removeLayers(): any

Remove and dispose all image layers.

Returns

any

---

showSecondToolbar

▸ showSecondToolbar(toolbarKey): Promise<void>

Show a second toolbar specified by the toolbarKey argument.

Example

// Show page tools bar.
viewer.showSecondToolbar("page-tools");

Parameters

Name	Type
toolbarKey	SecondToolbarType

Returns

Promise<void>

Accessors

isFullscreen

• get isFullscreen(): boolean

Gets a value indicating full screen mode.

Returns

boolean

---

isToolbarHidden

• get isToolbarHidden(): boolean

Gets a value indicating whether the toolbar is hidden.

Returns

boolean

---

eventBus

• get eventBus(): IEventBus

Image viewer event bus.

Example

viewer.eventBus.on("after-open", function(args) {
  console.log("Image opened.", args);
});
viewer.open('Test.png');

Returns

IEventBus

---

hasImage

• get hasImage(): boolean

Indicates whether the viewer has opened the image.

Example

 var hasImageFlag = viewer.hasImage;

Returns

boolean

---

imageFormat

• get imageFormat(): ImageFormatCode

Gets a format type of the opened image.

Returns

ImageFormatCode

• set imageFormat(format): void

Sets a format type of the opened image.

Parameters

Name	Type
format	ImageFormatCode

Returns

void

---

layers

• get layers(): IImageLayer[]

Image layers. Used for painting.

Returns

IImageLayer[]

---

naturalSize

• get naturalSize(): Object

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.

Returns

Object

Name	Type
width	number
height	number

---

undoStorage

• get undoStorage(): IUndoStorage

Command based undo state storage.

Example

const isUndoInProgress = viewer.undoStorage.undoInProgress;

Returns

IUndoStorage

---

hostElement

• get hostElement(): Element

Outermost viewer's host element containing the gc-viewer-host class.

Returns

Element

Properties

toggleSidebar

• toggleSidebar: (show?: boolean) => void

Type declaration

▸ (show?): void

Sets of toggles sidebar's panels visibility

Parameters

Name	Type
show?	boolean

Returns

void

---

toolbarLayout

• toolbarLayout: ImageToolbarLayout

Defines the layout of the toolbar.

Description

The full list of the viewer specific toolbar items:

'open', '$navigation', '$split', 'zoom', '$fullscreen', 'save', 'about'

Example

// Customize the toolbar layout:
viewer.toolbarLayout.viewer.default = ["open", "$zoom", "$fullscreen", "save", "print", "about"];
viewer.applyToolbarLayout();

---

in17n

• Readonly in17n: i18n

i18next instance.