[]
        
(Showing Draft Content)

ViewerOptions

Document Solutions Image Viewer - v7.0.0-rc3 / ViewerOptions

Class: ViewerOptions

Image Viewer options.

Example

var viewer = new DsImageViewer("#root", { friendlyFileName: "sample.png" });

Table of contents

Properties

Properties

viewerBackground

Optional viewerBackground: string = "rgb(128,128,128)"

Viewer client area background color.

Default

rgb(128,128,128)


customIcons

Optional customIcons: Object

Use this option to change the default SVG icons to custom ones. Available icon keys: 'about', 'download', 'flip-horizontal', 'flip-vertical', 'magnify-minus-outline', 'magnify-plus-outline', 'magnify', 'open', 'print', 'rotate', 'edit-undo', 'edit-redo'.

Example

var viewer = new DsImageViewer("#root", { 
  customIcons: {
    'open': '<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="24" height="24" viewBox="0 0 24 24"><path d="M9.516 14.016q1.875 0 3.188-1.313t1.313-3.188-1.313-3.188-3.188-1.313-3.188 1.313-1.313 3.188 1.313 3.188 3.188 1.313zM15.516 14.016l4.969 4.969-1.5 1.5-4.969-4.969v-0.797l-0.281-0.281q-1.781 1.547-4.219 1.547-2.719 0-4.617-1.875t-1.898-4.594 1.898-4.617 4.617-1.898 4.594 1.898 1.875 4.617q0 0.984-0.469 2.227t-1.078 1.992l0.281 0.281h0.797z"></path></svg>'
  }
});

Index signature

▪ [iconKey: string]: Element | string


friendlyFileName

Optional friendlyFileName: string = ""

Used when file name not available.

Example

viewer.options.friendlyFileName = "myFileName.png";
viewer.applyOptions();

file

Optional file: any = ""

Specifies the Image file name, URL, or binary data to be loaded in the Viewer.

Example

var viewer = new DsImageViewer("#root", { file: 'sample.png' } );

gifOptions

Optional gifOptions: GifOptions

GIF image format options.

Example

var viewer = new DsImageViewer("#root", { 
   gifOptions: { 
     autoPlay: true,     // start GIF animation automatically
     cumulative: false,  // disable cumulative frame rendering (clear previous frame appearance)
     playOnClick: true,  // play on click
     playOnHover: false, // do not play on hover
     speed: 2            // double the speed     
   }
 });

imageQuality

Optional imageQuality: number

The image quality to use for image formats that utilize lossy compression, such as JPEG and WEBP. The value should be a number between 0 and 1, where 0 represents the lowest quality and 1 represents the highest quality. If this option is not specified, the default value of 0.92 is used. Please note that this option exclusively affects image editing capabilities only.

Example

var viewer = new DsImageViewer("#root", {
  imageQuality: 0.5 // Set image quality to medium.
});

hideToolbar

Optional hideToolbar: boolean

Specifies whether to hide the toolbar.

Default

false

Example

const viewer = new DsImageViewer("#root", { hideToolbar: true } );

language

Optional language: string

User interface language. Note, in order to use the language option, you must specify the language option value during the viewer initialization phase.

Example

// Set UI language to Japanese:
var viewer = new DsImageViewer(selector, { language: 'ja' });
viewer.addDefaultPanels();

Example

function loadImageViewer(selector) {
  // Define custom translations:
  var myTranslations = {
		"toolbar": {
			"open-document": "Open MY document",
			"pan": "My Pan tool",
		}
   };
   // Initialize translations:
   DsImageViewer.i18n.init({
     resources: { myLang: { translation: myTranslations } }
   }).then(function(t) {
     // Translations initialized and ready to go.
     // Now create Image viewer:
     var viewer = new DsImageViewer(selector, { language: 'myLang' });
     viewer.addDefaultPanels();
     //viewer.open("sample.png");
   });
}
loadImageViewer('#root');

maxImageSize

Optional maxImageSize: Object

Use the maxImageSize option to limit the allowed image size used by the edit actions.

Type declaration

Name Type
width number
height number

onInitialized

Optional onInitialized: (viewer: any) => void

Type declaration

▸ (viewer): void

The onInitialized handler will be called immediately after the viewer is instantiated.

Example

var viewer = new DsImageViewer("#root", { 
  onInitialized: (viewer)=> { 
     // put viewer initialization code here. 
  } 
});
Parameters
Name Type
viewer any
Returns

void


theme

Optional theme: string | false

Use theme option to change default viewer theme. Available built-in themes are: gc-blue, viewer, dark, dark-yellow, light, light-blue. Set this option to false if you want to disable theme loading - this can be helpful if you have already included theme css.

Default

Default theme is gc-blue.

Example

// Require built-in light theme:
var viewer = new DsImageViewer("#root", { theme: "light" });

Example

// Require built-in dark theme:
var viewer = new DsImageViewer("#root", { theme: "dark" });

Example

// Load external light theme css using relative URL:
var viewer = new DsImageViewer("#root", { theme: "themes/light.css" });

Example

// Load external dark theme css using an absolute URL:
var viewer = new DsImageViewer("#root", { theme: "http://localhost:8080/themes/dark.css" });

Example

// <link href="~/Content/light-blue.css" rel="stylesheet" />
// Do not load theme:
var viewer = new DsImageViewer("#root", { theme: false } );

undo

Optional undo: false | UndoStorageOptions

Undo state storage options.

Example

// Disable undo storage:
var viewer = new DsImageViewer(selector, {
  undo: false
});

Example

// Do not track "Open" and "Close" commands:
var viewer = new DsImageViewer(selector, {
  undo: { skipCommands: "Open" }
});

zoomOptions

Optional zoomOptions: Object

Zoom control options.

Example

var viewer = new DsImageViewer("#root", { 
  zoomOptions: { 
    minZoom: 0.05, 
    maxZoom: 5, 
    dropdownZoomFactorValues: [0.05, 0.1, 0.3, 0.5, 0.7, 1, 1.5, 2, 3, 5] 
  }
});

Type declaration

Name Type Description
minZoom? number Defines min zoom factor Default 0.25 (25%)
maxZoom? number Defines max zoom factor Default 3 (300%)
dropdownZoomFactorValues? number[] Defines zoom factor array to show in Zoom Control Dropdown in Toolbar Default [0.5, 1, 1.5, 2, 3]

openParameters

Optional openParameters: OpenParameters

Default image open parameters.


shortcuts

Optional shortcuts: Object

Keyboard shortcuts. Available built-in keyboard shortcut tool names: "zoomIn" | "zoomOut" | "zoomActualSize" | "zoomPageWidth" | "rotate" | "rotateBackward" | "open" | "print" | "undo" | "redo" | "confirmChanges" | "cancelChanges".

Example

Override keyboard shortcut "Ctrl +"

var viewer = new DsImageViewer("#root", { 
  shortcuts: {
    107: {
      ctrl: true,
      tool: function(event) { 
          viewer.zoom = { mode: 0, factor: viewer.actualZoomFactor + 0.1 };
          event.preventDefault();
      }
    }
  }
});

Remove all default shortcuts

var viewer = new DsImageViewer("#root");
viewer.options.shortcuts = {};
viewer.applyOptions();

Index signature

▪ [keyCode: string]: KeyboardShortcutDefinition | KeyboardShortcutDefinition[]