Static findGets the viewer instance using the host element or host element selector
var viewer = DsImageViewer.findControl("#root");
Starts long-running operation and displays progress window while operation is running.
Optional settings: TaskSettingsSearches currently opened document for the text.
Optional progressFn: ((progress: { pageIndex: number; pageCount: null | number }) => void)Optional cancel: CancellationTokenCreate at least one image layer which will be used for painting.
Remove and dispose image layer given by argument layerOrIndex.
Image layer or image layer index or image layer name.
Call this method in order to apply changes in @see:toolbarLayout.
viewer.toolbarLayout.viewer.default = ["open", "save"];
viewer.applyToolbarLayout();
var viewer = new DsImageViewer(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();
Add plug-in instance which is used to add new functionality to the DsImageViewer.
var viewer = new DsImageViewer("#root");
var rotationPlugin = new RotationPlugin();
viewer.addPlugin(rotationPlugin);
Add window keyboard listener.
Used preliminarily by the plugin developers to configure the main toolbar layout.
// Apply a custom layout to insert "zoomIn" and "zoomOut" buttons at position 2 for the "PaintTools" plugin.
viewer.configurePluginMainToolbar(2, ["zoomIn", "zoomOut"]);
void
The position where the buttons should be inserted. Use false or -1 to skip insertion. Undefined means the position will be determined automatically.
An array of button keys to be inserted.
Retrieves the point location from the pointer event provided by the 'event' parameter. The returned point is relative to the active canvas element
DOM Pointer or Mouse event object.
Sets the cursor style for the image viewer
// Set rotate cursor during image rotation
viewer.setCursor('rotate');
// Set resize cursor when hovering over edges
viewer.setCursor('nwse-resize');
GlobalCursorType for all available cursor options
The cursor style to apply
Resets the cursor to default style
// Reset cursor when operation completes
viewer.resetCursor();
// Reset cursor on mouse leave
viewerElement.addEventListener('mouseleave', () => {
viewer.resetCursor();
});
Toggles between specified cursor and default style
// Toggle grab cursor during drag operations
viewer.toggleCursor(isDragging ? 'grab' : false);
// Toggle zoom cursor based on modifier key
document.addEventListener('keydown', (e) => {
if (e.ctrlKey) {
viewer.toggleCursor('zoom-in');
}
});
Cursor style to apply, or false to reset
Display confirmation dialog.
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
}
Optional confirmationText: string | ElementOptional level: "error" | "info" | "warning"Optional title: stringOptional buttons: ConfirmButton[]Remove plug-in instance from the DsImageViewer.
var viewer = new DsImageViewer("#root");
var rotationPlugin = new RotationPlugin();
viewer.addPlugin(rotationPlugin);
viewer.removePlugin(rotationPlugin.id);
Plugin id or plugin instance.
Finds a viewer plugin by its id.
// find imageFilters plugin:
var imageFilters = viewer.findPlugin("imageFilters");
// find pageTools plugin:
var pageTools = viewer.findPlugin("pageTools");
Execute a new command.
Instance of a CommandBase.
Create new empty image.
await viewer.newImage({ width: 300, height: 300, fileName: "myImage.png" });
Optional options: { width?: number; height?: number } & OpenParametersOpen Image document.
viewer.open("Images/HelloWorld.png");
Optional file: anyURL to Image document(string) or binary data(Typed array - Uint8Array).
Optional openParameters: ImageFormatCode | ImageFormatName | OpenParametersLoading parameters object.
Trigger event.
// Listen CustomEvent:
viewer.getEvent("CustomEvent").register(function(args) {
console.log(args);
});
// Trigger CustomEvent:
viewer.triggerEvent("CustomEvent", { arg1: 1, arg2: 2});
Optional args: anyDisplays a second toolbar specified by the toolbarKey argument.
// Show the page tools toolbar
viewer.showSecondToolbar("page-tools");
The key identifying the specific second toolbar to show.
Hides the second toolbar. This method deactivates any active editor mode associated with the second toolbar and then hides the toolbar itself.
A Promise that resolves once the second toolbar is successfully hidden.
// Hide the second toolbar
viewer.hideSecondToolbar();
// Hide a specific second toolbar by passing its key
viewer.hideSecondToolbar("page-tools");
Optional toolbarKey: SecondToolbarTypeOptional. The key identifying the specific second toolbar to hide. If provided, only hides the specified toolbar if it exists.
Downloads the Image document loaded in the Viewer to the local disk.
Deprecated since v1.2.0-a6 in favor of the save method.
Optional fileName: stringthe destination file name.
Optional original: booleanFlag indicating whether to use the original image for save. Defaults to false.
Saves the Image document loaded in the Viewer to the local disk.
// Example: Save the modified image without using specific options.
const viewer = DsImageViewer.findControl("#root");
viewer.save();
// Example: Save the modified image as "image.png".
const viewer = DsImageViewer.findControl("#root");
viewer.save({ fileName: "image.png" });
// 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: Save the modified image in PNG format.
const viewer = DsImageViewer.findControl("#root");
viewer.save({ convertToFormat: "image/png" });
// 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" });
Optional options: string | SaveOptionsThe save options, including the destination file name and other settings.
Optional original: booleanFlag indicating whether to use the initial version of the image for save. Defaults to false.
Gets the main window's host element
Gets or sets callback that is invoked when an error occurs in the process of displaying the report
The event indicating document was changed (new document opened, drilled or "back to parent" is issued)
The event indicating document view was changed (new document opened, refreshed, toggled etc)
The event indicating document load progress
Indicates the viewer state was changed.
Temporary expose event, which occurs on panel change
Gets currently viewed document state
Gets or sets view mode (single page or continuous).
Gets/sets target element for zoom transformation. If 'page' is set, each page will be transformed individually (default behavior). If 'viewport' is set, entire viewport element will be transformed instead. This is added to prevent issues in some specific cases, see ARJ-4340. *
Gets or sets viewer background color, default value = 'transparent'
Gets or sets page view decoration mode.
Gets the current document
Gets a format type of the opened image.
Indicates whether the viewer has opened the image.
var hasImageFlag = viewer.hasImage;
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.
Gets the actual display size of the active image, including the active zoom value.
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.
Standardized language key (e.g., 'en', 'ja').
Image layers. Used for painting.
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.
The Open parameters that were used to open an image.
Viewer options
Defines the layout of the toolbar.
The full list of the viewer specific toolbar items:
'open', '$navigation', 'navigation-auto', '$split', 'zoom', '$fullscreen', 'save', 'about'
// Customize the toolbar layout:
viewer.toolbarLayout.viewer.default = ["open", "$zoom", "$fullscreen", "save", "print", "about"];
viewer.applyToolbarLayout();
Command based undo state storage.
const isUndoInProgress = viewer.undoStorage.undoInProgress;
Gets a value indicating whether the image viewer can undo changes.
if(viewer.hasUndo) {
viewer.undo();
}
Gets a value indicating whether the image viewer can redo changes.
if(viewer.hasRedo) {
viewer.redo();
}
Gets current undo level index.
alert("The current Undo level index is " + viewer.undoIndex);
Gets total undo levels count.
alert("Undo levels count is " + viewer.undoCount);
Returns the current version of the DS Image viewer.
alert("The DsImageViewer version is " + viewer.version);
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.
var viewer = new DsImageViewer('#root');
viewer.frameIndex = 9;
viewer.open('Test.ico');
Gets total frames count for the active image. Applicable for TIFF, ICO images.
var viewer = new DsImageViewer('#root');
viewer.onAfterOpen.register(function() {
alert("The image opened. Total number of frames: " + viewer.framesCount);
});
viewer.open('Test.png');
Occurs immediately before the image opens.
var 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');
The event indicating error.
function handleError(args) {
console.error(args);
}
var viewer = new DsImageViewer('#root');
viewer.onError.register(handleError);
viewer.open('Test.png');
The event raised when appearance image element changed.
Gets a value indicating whether the image animation has started.
// Toggle image animation:
const viewer = DsImageViewer.findControl("#root");
if(viewer.isAnimationStarted) {
viewer.stopAnimation();
} else {
viewer.startAnimation();
}
Sets of toggles sidebar's panels visibility
Optional show: booleanDsImageViewer constructor.
Required. HTML element or CSS selector.
Optional. Viewer options.
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