Using Plug-ins

In image editing, every application requires a distinct set of editing features. Hence, DsImageViewer provides different plug-ins to implement advanced editing features, so that you can install only necessary plug-ins. This keeps your application footprint under check while providing your application with the features it needs.

Plug-in Name	Plug-in Icon	Description
Page tools		Provides various image transformation operations such as rotation, flip, cropping etc. through a second toolbar. For more information about these operations, see Transformations and Crop and Resize.
Image filters		Provides various filters or effects to apply on an image through a second toolbar. For example, Invert, Grayscale etc. For more information, see Effects.
Paint tools		Provides various Paint and Text tools to edit an image through a secondary toolbar. For more information on the Paint and Text tools, see Paint and Text.

In DsImageViewer, you can add a plug-in using the addPlugin method. By default, a plug-in icon is added next to the Open document icon. However, you can specify the position of the new icon by setting buttonPosition option. You can also choose to hide the icon by setting the value of this option to -1.

Before adding the plug-in using addPlugin method, you must include the appropriate plugin JavaScript (js) file into the HTML/CSHTML page to add the plugin to the viewer. The js file is located in the “plugins“ folder present in the DsImageViewer build. The code below shows how to include a plugin js file for Paint tools using the script tag:

<script src="./node_modules/@@mescius/dsimageviewer/plugins/paintTools.js" type="text/javascript"></script>

To remove a specific plugin from DsImageViewer, you can use the removePlugin method and pass unique id of the target plug-in as its parameter. You can remove all the plug-ins by calling removePlugins method.

The code below shows how to add and remove a plug-in from the DsImageViewer control.

function loadImageViewer() {
    // intialize image viewer
    var viewer = new DsImageViewer("#imageviewer");
    viewer.open("https://i.imgur.com/tl0ZsW7.jpeg");
    // add Plugin
    viewer.addPlugin(new PageToolsPlugin());

    // remove plug-in
    // viewer.removePlugin("<PlugInID>");

    // remove all plug-ins
    // viewer.removePlugins();
}

DsImageViewer lets you customize layout of the plug-in toolbar or second toolbar that appears on clicking the plug-in icon. The plug-in class provides a toolbarLayout property which lets you specify order of the options to be displayed in the second toolbar by using their corresponding toolbar button keys. If this property is not set, the viewer displays the second toolbar buttons in default order.

// Create custom page tools plugin with visible toolbar button:
var pageToolsPlugin = new PageToolsPlugin({ toolbarLayout: ["rotate-image", "flip-horizontal", "$split", "download"] });
viewer.addPlugin(pageToolsPlugin);

DsImageViewer allows you to add a plug-in without displaying the toolbar or sidebar buttons. The buttonPosition option allows you to set the visibility status of the plug-in button(s).

Refer to the following example code to add PaintToolsPlugin without displaying the Paint and Text Tools toolbar buttons:

// Initialize DsImageViewer.
var viewer = new DsImageViewer("#root");

// Initialize PaintToolsPlugin and hide the toolbar buttons.
var paintToolsPlugin = new PaintToolsPlugin({buttonPosition: false});

// Add the plug-in.
viewer.addPlugin(paintToolsPlugin);

Using Plug-ins

Customize Plug-in Toolbar

Add Plug-in without Visible Toolbar Button