README
Document Solutions Image Viewer - v7.1.0
Document Solutions Image Viewer - v7.1.0
Table of contents
Type Aliases
- EventBusAttachOptions
- EventBusEventName
- GifOptions
- EventName
- EventArgs
- CancelEventArgs
- ErrorEventArgs
- BeforeOpenEventArgs
- AfterOpenEventArgs
- ImagePaintEventArgs
- GcImageFormatName
- OpenParameters
- KeyboardShortcutDefinition
- KeyboardShortcutTool
- SaveOptions
- SaveAsMenuOptions
- SaveButtonOptions
- ImageToolbarLayout
- UndoStorageOptions
- ImageFilterToolButtonKey
- ImageFiltersPluginOptions
- PageToolButtonKey
- PageToolsPluginOptions
- RotationPluginOptions
Classes
- EventBus
- DsImageViewer
- GcImageViewer
- OpenCommand
- CloseCommand
- StartAnimationCommand
- StopAnimationCommand
- FrameIndexCommand
- ZoomCommand
- UndoStorage
- ViewerOptions
- ImageFiltersPlugin
- PageToolsPlugin
- PaintToolsPlugin
- RotationPlugin
Interfaces
Enumerations
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);
});
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 } }); |
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.
GcImageFormatName
Ƭ GcImageFormatName: "jpg" | "png" | "tiff" | "gif" | "bmp" | "ico" | "svg" | "webp"
Image format name.
OpenParameters
Ƭ OpenParameters: Object
Open parameters.
Type declaration
| Name | Type | Description |
|---|---|---|
imageFormat? |
GcImageFormat | GcImageFormatName | GcImageFormat |
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. |
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? |
GcImageFormat | GcImageMimeType |
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? |
GcImageMimeType[] |
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"] } }); |
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 GcImageViewer("#root"); var pageToolsPlugin = new PageToolsPlugin( { toolbarLayout: ["rotate-image", "flip-horizontal"] } ); viewer.addPlugin(pageToolsPlugin); </script> |
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 |