Document Solutions Image Viewer
    Preparing search index...

    Interface ViewerOptions

    Image Viewer options.

    const viewer = new DsImageViewer("#root", { friendlyFileName: "sample.png" });
    interface ViewerOptions {
        viewerBackground: string;
        customIcons: Record<MainToolbarIcon, Element | string>;
        friendlyFileName: string;
        file: any;
        fontNames?: FontsOptions;
        gifOptions: GifOptions;
        imageQuality: number;
        hideToolbar: boolean;
        language: string;
        maxImageSize: Size;
        onInitialized: (viewer: ImageViewerAPI) => void;
        saveButton: SaveButtonOptions;
        theme?: string | false;
        undo: false | UndoStorageOptions;
        zoomOptions?: ZoomOptions;
        openParameters: OpenParameters;
        shortcuts: Record<
            string
            | number,
            KeyboardShortcutDefinition | KeyboardShortcutDefinition[],
        >;
    }

    Properties

    viewerBackground: string

    Viewer client area background color.

    rgb(128,128,128)
    customIcons: Record<MainToolbarIcon, Element | string>

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

    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: string

    Used when file name not available.

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

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

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

    Array of the available font names.

    [
      { 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' }
    ]

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

    GIF image format options.

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

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

    Specifies whether to hide the toolbar.

    false

    const viewer = new DsImageViewer("#root", { hideToolbar: true } );
    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.

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

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

    onInitialized: (viewer: ImageViewerAPI) => void

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

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

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

    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 theme is gc-blue.

    // 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: false | UndoStorageOptions

    Undo state storage options.

    // 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?: ZoomOptions

    Zoom control options.

    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

    Default image open parameters.

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

    Keyboard shortcuts.

    Properties