# ViewerOptions

## Content

# Interface: ViewerOptions

Image Viewer options.

## Example

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

## Properties

### customIcons

```ts
customIcons: Record<MainToolbarIcon, Element | string>;
```

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

#### Example

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

***

### file

```ts
file: any;
```

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

#### Example

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

***

### fontNames?

```ts
optional fontNames?: FontsOptions;
```

Array of the available font names.

#### Default

```javascript
[
  { 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

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

***

### friendlyFileName

```ts
friendlyFileName: string;
```

Used when file name not available.

#### Example

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

***

### gifOptions

```ts
gifOptions: GifOptions;
```

GIF image format options.

#### Example

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

***

### hideToolbar

```ts
hideToolbar: boolean;
```

Specifies whether to hide the toolbar.

#### Default

```ts
false
```

#### Example

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

***

### imageQuality

```ts
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

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

***

### language

```ts
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

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

***

### maxImageSize

```ts
maxImageSize: Size;
```

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

***

### onInitialized

```ts
onInitialized: (viewer) => void;
```

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

#### Parameters

##### viewer

[`ImageViewerAPI`](ImageViewerAPI)

#### Returns

`void`

#### Example

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

***

### openParameters

```ts
openParameters: OpenParameters;
```

Default image open parameters.

***

### saveButton

```ts
saveButton: SaveButtonOptions;
```

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

***

### shortcuts

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

Keyboard shortcuts.

***

### theme?

```ts
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

```ts
Default theme is gc-blue.
```

#### Examples

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

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

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

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

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

***

### undo

```ts
undo: false | UndoStorageOptions;
```

Undo state storage options.

#### Examples

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

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

***

### viewerBackground

```ts
viewerBackground: string;
```

Viewer client area background color.

#### Default

```ts
rgb(128,128,128)
```

***

### zoomOptions?

```ts
optional zoomOptions?: ZoomOptions;
```

Zoom control options.

#### Example

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