ViewerOptions

Document Solutions Image Viewer - v7.2.0 / ViewerOptions

Class: ViewerOptions

Image Viewer options.

Example

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

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

Example

// Define custom translations:
function loadImageViewer(selector) {
  var myTranslations = {
		"toolbar": {
			"open": "Öffnen",
         "save": "Speichern",
         "print": "Drucken",
         "save-as": "Speichern unter"
		}
   };
   // 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' });

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

saveButton

• Optional saveButton: SaveButtonOptions

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

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

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();
      }
    }, {
      meta: 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[]

ViewerOptions

Class: ViewerOptions

Table of contents

Properties

Properties

viewerBackground

customIcons

Index signature

friendlyFileName

file

gifOptions

imageQuality

hideToolbar

language

maxImageSize

Type declaration

onInitialized

Type declaration

Parameters

Returns

saveButton

theme

undo

zoomOptions

Type declaration

openParameters

shortcuts

Index signature