Class ViewerOptions

Viewer client area background color.

Default

rgb(128,128,128)

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

Used when file name not available.

Example

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

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

Example

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

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

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

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

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

Specifies whether to hide the toolbar.

Default

false

Example

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

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

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

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

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

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

Default image open parameters.

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();
      }
    }, {
      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();