ViewerOptions

Class: ViewerOptions

Image Viewer options.

Example

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

Properties

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'.

Index Signature

[iconKey: string]: string | Element

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

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

fontNames?

optional fontNames: object[];

Array of the available font names.

name

name: string;

value

value: string;

Default

[
{ value: 'Helv', name: 'Helvetica' }, { value: 'HelveticaRegular', name: 'Helvetica-Oblique' }, { value: 'HelveticaBold', name: 'Helvetica-Bold' }, { value: 'HelveticaBoldItalic', name: 'Helvetica-BoldOblique' },
{ value: 'TimesRegular', name: 'Times-Roman' }, { value: 'TimesItalic', name: 'Times-Italic' }, { value: 'TimesBold', name: 'Times-Bold' }, { value: 'TimesBoldItalic', name: 'Times-BoldItalic' },
{ value: 'CourierRegular', name: 'Courier' }, { value: 'CourierItalic', name: 'Courier-Oblique' }, { value: 'CourierBold', name: 'Courier-Bold' }, { value: 'CourierBoldItalic', name: 'Courier-BoldOblique' },
{ value: 'Symbol', name: 'Symbol' }
]

Example

var viewer = new DsImageViewer("#root", {
     fontNames: [{value: 'Arial', name: 'Arial'}, {value: 'Verdana', name: 'Verdana'}]
});

friendlyFileName?

optional friendlyFileName: string;

Used when file name not available.

Example

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

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

hideToolbar?

optional hideToolbar: boolean;

Specifies whether to hide the toolbar.

Default

false

Example

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

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

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.

Examples

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

// 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.

height

height: number;

width

width: number;

onInitialized()?

optional onInitialized: (viewer) => void;

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

Parameters

viewer

any

Returns

void

Example

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

openParameters?

optional openParameters: OpenParameters;

Default image open parameters.

saveButton?

optional saveButton: SaveButtonOptions;

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

shortcuts?

optional shortcuts: object;

Index Signature

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

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

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.

Examples

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

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

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

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

// <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.

Examples

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

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

viewerBackground?

optional viewerBackground: string;

Viewer client area background color.

Default

rgb(128,128,128)

zoomOptions?

optional zoomOptions: object;

Zoom control options.

dropdownZoomFactorValues?

optional dropdownZoomFactorValues: number[];

Defines zoom factor array to show in Zoom Control Dropdown in Toolbar

Default

[0.5, 1, 1.5, 2, 3]

maxZoom?

optional maxZoom: number;

Defines max zoom factor

Default

3 (300%)

minZoom?

optional minZoom: number;

Defines min zoom factor

Default

0.25 (25%)

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