[]
DEMOS DOCS API PRICING
FREE TRIAL
(Showing Draft Content)

README

Document Solutions Image Viewer - v8.0.0

Document Solutions Image Viewer - v8.0.0

Table of contents

Type Aliases

Classes

Interfaces

Enumerations

Functions

Type Aliases

EventBusAttachOptions

Ƭ EventBusAttachOptions: Object

Event handler attach options.

Type declaration

Name Type Description
once? boolean Listen to the event once.

EventBusEventName

Ƭ EventBusEventName: "before-open" | "after-open" | "before-close" | "after-close" | "zoom-changed" | "frame-index-changed" | "animation-started" | "animation-stopped" | "keydown" | "keyup"

EventBus event name.

Example

viewer.eventBus.on("zoom-changed", function(args) {
  console.log("Zoom changed", args);
});

ConfirmButton

Ƭ ConfirmButton: "Yes" | "No" | "Ok" | "Cancel" | "Confirm" | "Close" | "Dismiss"

Confirm button type.

GifOptions

Ƭ GifOptions: Object

GIF options.

Type declaration

Name Type Description
cumulative? boolean Cumulative drawing mode - do not clear previous frame appearance.
maxBufferLength? number Maximum image buffer length to load. The image buffer length is calculated as follows: NumFrames * image.height * image.width * 4. If the GIF image exceeds this value, only the first frame will be loaded. The default and maximum value is 2145386496.
playOnHover? boolean Play/stop animation on mouse over/out.
playOnClick? boolean Play/stop animation on mouse click.
autoPlay? boolean Automatically play video when a GIF image contains more than one frame.
speed? number Animation speed. The delay between frames will be divided by the value specified in the "speed" setting. The lower the value, the slower the animation will run. The higher the value, the faster the animation runs. Default 1 Example javascript // Slowing down the animation by two times: var viewer = new GcImageViewer("#root", { gifOptions: { speed: 0.5 } }); Example javascript // Animation acceleration by two times:: var viewer = new GcImageViewer("#root", { gifOptions: { speed: 2 } });

PointerTriggerType

Ƭ PointerTriggerType: "start" | "move" | "end"

Paint point trigger type.

PaintCommandName

Ƭ PaintCommandName: "Pencil" | "Brush" | "Eraser" | "ErasePath2D" | "CloneStamp" | "TextPaintObject" | "UpdateObjectPosition" | "SetObjectProperty" | "DeleteObject" | "CopySelectedRegion" | "UpdateSelectedRegion" | "ResetSelectedRegion" | "CommitSelectedRegionImage" | "UndoSequenceMarker"

Paint command name.

IPaintExecuteOptions

Ƭ IPaintExecuteOptions: Object

Paint command execution options.

Type declaration

Name Type Description
prevCommand? IPaintCommand Previous command.
context IPaintDesignerContext -

PaintObjectParameters

Ƭ PaintObjectParameters: Object

Paint object parameters.

Type declaration

Name Type
isDesignTime? boolean
context IImageLayer

PaintObjectPropertyName

Ƭ PaintObjectPropertyName: "bounds" | "fontSize" | "fontName" | "fontBold" | "fontItalic" | "opacity" | "text" | "textColor"

Paint object property name.

EventName

Ƭ EventName: "ErrorEvent" | "BeforeOpenEvent" | "AfterOpenEvent" | "ThemeChangedEvent" | "ImagePaint"

Event name.

EventArgs

Ƭ EventArgs: Object

Base type for event arguments.

Type declaration

Name Type Description
eventName? EventName Event name.
source? GcImageViewer Event source.

CancelEventArgs

Ƭ CancelEventArgs: { cancel?: boolean } & EventArgs

Base type for cancelable event arguments.

ErrorEventArgs

Ƭ ErrorEventArgs: { message: string ; type: "open" | string ; exception?: any } & EventArgs

Error event arguments.

BeforeOpenEventArgs

Ƭ BeforeOpenEventArgs: { payload: Uint8Array | string ; type: "binary" | "url" ; openParameters: OpenParameters } & EventArgs

Before open event arguments.

AfterOpenEventArgs

Ƭ AfterOpenEventArgs: & EventArgs

After open event arguments.

ImagePaintEventArgs

Ƭ ImagePaintEventArgs: { paneElement: HTMLElement } & EventArgs

Image paint event arguments.

ToolbarItemType

Ƭ ToolbarItemType: "Selection" | "Pencil" | "Brush" | "Eraser" | "CloneStamp" | "Text" | "Pixelate" | "Blur" | "Brightness" | "Contrast" | "BrightnessContrast" | "Vibrance" | "Splitter" | "Size" | "Color" | "UseOriginalImage" | "Undo" | "Redo" | "Apply" | "Cancel" | "FontSize" | "FontName" | "FontBold" | "FontItalic" | "FontColor"

Represents the types of items that can be used in the Paint, Text, and Effects toolbars.

SecondToolbarType

Ƭ SecondToolbarType: "page-tools" | "crop-image" | "resize-image" | "text-tools" | "paint-tools" | "effects" | "image-filter-tools" | "image-filter-settings" | "none"

Second toolbar type.

ImageFormatName

Ƭ ImageFormatName: "jpg" | "png" | "tiff" | "gif" | "bmp" | "ico" | "svg" | "webp"

Image format name.

OpenParameters

Ƭ OpenParameters: Object

Open parameters.

Type declaration

Name Type Description
imageFormat? ImageFormatCode | ImageFormatName | ImageFormatCode Image format type. Use the imageFormat parameter when the viewer cannot automatically determine the image format. Description Available image formats are: 1 = JPEG, 2 = PNG, 3 = TIFF, 4 = GIF, 5 = BMP, 6 = ICO, 7 = SVG, 8 = WEBP Example javascript // Open TIFF image from URL. viewer.open("http://localhost/getimage?id=1&fmt=3", { imageFormat: 3 }); // or: viewer.open("http://localhost/getimage?id=1&fmt=3", { imageFormat: "tiff" });
imageDPI? number Image DPI. DPI value is used to determine the quality and resolution of the image. Default 96 Example javascript viewer.open("sample.png", { imageDPI: 72 });
fileName? string Optional. Friendly file name. Example javascript viewer.open("/getSampleImage", { fileName: "sample.png" });

KeyboardShortcutDefinition

Ƭ KeyboardShortcutDefinition: Object

Keyboard shortcut definition.

Type declaration

Name Type Description
keyCode? number Optional key code.
ctrl? boolean Specifies whether the Ctrl key should be pressed.
shift? boolean Specifies whether the Shift key should be pressed.
alt? boolean Specifies whether the Alt key should be pressed.
meta? boolean Specifies whether the Meta key should be pressed.
tool KeyboardShortcutTool | Function Shotcut action.

KeyboardShortcutTool

Ƭ KeyboardShortcutTool: "zoomIn" | "zoomOut" | "zoomActualSize" | "zoomPageWidth" | "rotate" | "rotateBackward" | "open" | "print" | "undo" | "redo" | "confirmChanges" | "cancelChanges" | "save"

Available tool names.

SaveOptions

Ƭ SaveOptions: Object

Options for saving an image.

Property

The target format code to convert the image to during saving.

Property

The desired file name for the saved image.

Property

Indicates whether to retrieve the original version of the image.

Type declaration

Name Type
convertToFormat? ImageFormatCode | ImageMimeType
fileName? string
original? boolean

SaveAsMenuOptions

Ƭ SaveAsMenuOptions: Object

Options for the Save As menu.

Property

List of available formats for saving. Leave undefined to detect supported formats automatically.

Type declaration

Name Type Description
availableFormats? ImageMimeType[] List of available formats for saving. Leave undefined to detect supported formats automatically.

SaveButtonOptions

Ƭ SaveButtonOptions: { saveAsMenu?: boolean | SaveAsMenuOptions } & SaveOptions

Options for customizing the behavior and appearance of the "Save" button.

ImageToolbarLayout

Ƭ ImageToolbarLayout: Object

Defines the layout of the toolbar.

Type declaration

Name Type Description
viewer ToolbarLayout The toolbar layout for viewer mode.

UndoStorageOptions

Ƭ UndoStorageOptions: Object

Undo storage options.

Type declaration

Name Type Description
maxLevels? number Max undo levels.
skipCommands? string[] The names of the undo commands to skip. Available built-in command names are: "Open", "Close", "FrameIndex", "Zoom", "Rotation", "Flip", "StartAnimation", "StopAnimation". Note that the "Open"/"Close" and "StartAnimation"/"StopAnimation" commands are paired - if one command is skipped, the other command will also be skipped. Example javascript var viewer = new GcImageViewer(selector, { undo: { skipCommands: ["Open", "Zoom"] } });

ImageMimeType

Ƭ ImageMimeType: "image/png" | "image/x-png" | "image/jpeg" | "image/bmp" | "image/gif" | "image/webp" | "image/svg+xml" | "image/ico" | "image/tiff"

Image mime type.

ImageFilterDefinition

Ƭ ImageFilterDefinition: Object

Defines image filter.

Type declaration

Name Type Description
filterId string Unique filter name. Used as filter identifier.
toolbarKey string Uniqie toolbar button key.
title string Filter description title.
text string Short filter name.
action Function Filter action.
intensity? number Filter intensity if available.
min? number Min intensity.
max? number Max intensity.
step? number Intensity slider step.
builtin? boolean Indicates whether the image filter is builtin and can be used in a background worker service.

ImageFilterToolButtonKey

Ƭ ImageFilterToolButtonKey: "image-filter-red" | "$split" | "edit-undo" | "edit-redo"

Image Filters toolbar button key.

ImageFiltersPluginOptions

Ƭ ImageFiltersPluginOptions: Object

ImageFiltersPlugin options.

Type declaration

Name Type Description
showSidebarPanel? boolean Show sidebar Image filters preview. Default true
showToolbarButton? boolean | number Show "Image Filters" toolbar button. You can specify toolbar button position using number value. Default false
toolbarLayout? ImageFilterToolButtonKey[] The Image Filters second toolbar layout. Default Default layout: [[...filters], "$split", "edit-undo", "edit-redo"] Example javascript <script src="gcimageviewer.js"></script></head> <script src="plugins/imageFilters.js"></script> <script> var viewer = new GcImageViewer("#root"); var imageFiltersPlugin = new ImageFiltersPlugin( { toolbarLayout: ["image-filter-red"] } ); viewer.addPlugin(imageFiltersPlugin); </script>

PageToolButtonKey

Ƭ PageToolButtonKey: "rotate-image" | "flip-horizontal" | "flip-vertical" | "crop-image" | "resize-image" | "$split" | "edit-undo" | "edit-redo"

Page tools toolbar button key.

PageToolsPluginOptions

Ƭ PageToolsPluginOptions: Object

PageToolsPlugin options.

Type declaration

Name Type Description
buttonPosition? number | false The position where the "Page tools" button should be inserted. Use false or -1 to skip insertion. Undefined means the position will be determined automatically.
toolbarLayout? PageToolButtonKey[] The page tools toolbar layout. Default Default layout: ["rotate-image", "flip-horizontal", "flip-vertical", "crop-image", "resize-image"] Example javascript <script src="gcimageviewer.js"></script></head> <script src="plugins/pageTools.js"></script> <script> var viewer = new DsImageViewer("#root"); var pageToolsPlugin = new PageToolsPlugin( { toolbarLayout: ["rotate-image", "flip-horizontal"] } ); viewer.addPlugin(pageToolsPlugin); </script>

PaintToolsPluginOptions

Ƭ PaintToolsPluginOptions: Object

Options for the PaintToolsPlugin.

Type declaration

Name Type Description
buttonPosition? number | false The position where the "Paint tools", "Text tools" and "Effects" buttons should be inserted in the main toolbar. Use false or -1 to skip insertion. Undefined means the position will be determined automatically.
fontNames? string[] Array of available font names. Default ['Arial', 'Verdana', 'Helvetica', 'Tahoma', 'Trebuchet MS', 'Times New Roman', 'Georgia', 'Garamond', 'Courier New', 'Brush Script MT']
toolbarLayout? { effectsTools: ToolbarItemType[] | false ; paintTools: ToolbarItemType[] | false ; textTools: ToolbarItemType[] | false } Optional. Specifies the layout of the paint, text and effects toolbar. Defaults: * paintTools: ["Apply", "Cancel", "Splitter", "Selection", "Pencil", "Brush", "CloneStamp", "Eraser", "Splitter", "Size", "Color", "UseOriginalImage", "Splitter", "Undo", "Redo"] * textTools: ["Text", "Splitter", "FontSize", "FontName", "FontBold", "FontItalic", "FontColor", "Splitter", "Undo", "Redo", "Splitter", "Apply", "Cancel"] * effectsTools: ["Apply", "Cancel", "Splitter", "Selection", "Splitter", "BrightnessContrast", "Vibrance", "Blur", "Pixelate", "Splitter", "Eraser", "Size", "UseOriginalImage", "Splitter", "Undo", "Redo"] Example javascript // Modify paint tools toolbar viewer.addPlugin(new PaintToolsPlugin({ toolbarLayout: { paintTools: ["Pencil", "Size", "Color", "Splitter", "Apply", "Cancel"] } })); Example javascript // Modify text tools toolbar viewer.addPlugin(new PaintToolsPlugin({ toolbarLayout: { textTools: ["Text", "FontSize", "Splitter", "Apply", "Cancel"] } })); Example javascript // Modify effects tools toolbar viewer.addPlugin(new PaintToolsPlugin({ toolbarLayout: { effectsTools: ["Apply", "Cancel", "Splitter", "Brightness", "Pixelate" ] } })); Example javascript // Hide the text tools and paint tools buttons from the main toolbar, showing only the effects button: viewer.addPlugin(new PaintToolsPlugin({ toolbarLayout: { textTools: false, paintTools: false } }));
toolbarLayout.effectsTools ToolbarItemType[] | false Array of items for the effects tools toolbar. Set to false if you want to hide this toolbar item. Default ["Apply", "Cancel", "Splitter", "Selection", "Splitter", "BrightnessContrast", "Vibrance", "Blur", "Pixelate", "Splitter", "Eraser", "Size", "UseOriginalImage", "Splitter", "Undo", "Redo"]
toolbarLayout.paintTools ToolbarItemType[] | false Array of items for the paint tools toolbar. Set to false if you want to hide this toolbar item. Default ["Apply", "Cancel", "Splitter", "Selection", "Pencil", "Brush", "CloneStamp", "Eraser", "Splitter", "Size", "Color", "UseOriginalImage", "Splitter", "Undo", "Redo"]
toolbarLayout.textTools ToolbarItemType[] | false Array of items for the text tools toolbar. Set to false if you want to hide this toolbar item. Default ["Apply", "Cancel" , "Splitter", "Text", "Splitter", "FontSize", "FontName", "FontBold", "FontItalic", "FontColor", "Splitter", "Undo", "Redo"]

RotationPluginOptions

Ƭ RotationPluginOptions: Object

RotationPlugin options.

Type declaration

Name Type Description
rotatePosition number | false "Rotate image" button position. Set the rotatePosition option to -1 or false if you don't wish to show "Rotate image" button. Default 1
flipHorizontalPosition number | false "Flip horizontal" button position. Set the flipHorizontalPosition option to -1 or false if you don't wish to show "Flip horizontal" button. Default 2
flipVerticalPosition number | false "Flip vertical" button position. Set the flipVerticalPosition option to -1 or false if you don't wish to show "Flip vertical" button. Default 3

Functions

imageFormatToMimeType

▸ imageFormatToMimeType(imageFormat): ImageMimeType

Converts a ImageFormatCode enum value to the corresponding image MIME type.

Parameters

Name Type Description
imageFormat ImageFormatCode The ImageFormatCode enum value representing the image format.

Returns

ImageMimeType

  • The corresponding image MIME type.

mimeTypeToImageFormat

▸ mimeTypeToImageFormat(mimeType, defaultFormat?): ImageFormatCode

Converts an image MIME type to the corresponding ImageFormatCode enum value.

Parameters

Name Type Description
mimeType ImageMimeType The MIME type of the image.
defaultFormat? ImageFormatCode -

Returns

ImageFormatCode

  • The corresponding ImageFormatCode enum value.

findImageFormat

▸ findImageFormat(fileOrName, defaultImageFormat?): ImageFormatCode

Find the image format for the file specified by the fileOrName parameter.

Parameters

Name Type Default value Description
fileOrName string | ImageFormatCode | File | Uint8Array undefined File object or file name string
defaultImageFormat ImageFormatCode ImageFormatCode.Default Optional.

Returns

ImageFormatCode

getSupportedImageFormats

▸ getSupportedImageFormats(): ImageMimeType[]

Gets an array of supported image formats using the canvas element and its toDataURL method.

Returns

ImageMimeType[]

  • An array of supported image formats.

convertImageToFormat

▸ convertImageToFormat(imageUrl, targetMimeType): Promise<Blob>

Converts an image from a given URL to a specified format with the provided MIME type.

Parameters

Name Type Description
imageUrl string The URL of the image.
targetMimeType ImageMimeType The desired MIME type for conversion.

Returns

Promise<Blob>

  • A Blob object containing the converted image.