Interface: ViewerOptions

Image Viewer options.

Example

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

Properties

viewerBackground

viewerBackground: string;

Viewer client area background color.

Default

rgb(128,128,128)

---

customIcons

customIcons: Record<MainToolbarIcon, string | Element>;

Use this option to change the default SVG icons to custom ones.

Example

const 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="M20,230 Q40,205 50,230 T90,230" fill="none" stroke="blue" stroke-width="5"/></svg>'
  }
});

---

friendlyFileName

friendlyFileName: string;

Used when file name not available.

Example

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

---

file

file: any;

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

Example

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

---

fontNames?

optional fontNames: FontsOptions;

Array of the available font names.

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

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

---

gifOptions

gifOptions: GifOptions;

GIF image format options.

Example

const 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

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

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

---

hideToolbar

hideToolbar: boolean;

Specifies whether to hide the toolbar.

Default

false

Example

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

---

language

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:
const viewer = new DsImageViewer(selector, { language: 'ja' });

---

maxImageSize

maxImageSize: Size;

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

---

onInitialized()

onInitialized: (viewer) => void;

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

Parameters

viewer

ImageViewerAPI

Returns

void

Example

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

---

saveButton

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.

Examples

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

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

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

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

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

---

undo

undo: false | UndoStorageOptions;

Undo state storage options.

Examples

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

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

---

zoomOptions?

optional zoomOptions: ZoomOptions;

Zoom control options.

Example

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

---

openParameters

openParameters: OpenParameters;

Default image open parameters.

---

shortcuts

shortcuts: Record<string | number, 
  | KeyboardShortcutDefinition
  | KeyboardShortcutDefinition[]>;

Keyboard shortcuts.