# Document Solutions Image Viewer and Editor

#### [日本語](#japanese)

__Document Solutions Image Viewer__ (__DsImageViewer__) is a fast
modern JavaScript based image viewer and editor that runs in all major browsers.
The viewer can be used as a cross platform solution to view or modify images
on Windows, MAC, Linux, iOS and Android devices.
DsImageViewer is included in
[Document Solutions for Imaging (DsImaging)](https://developer.mescius.com/document-solutions/dot-net-imaging-api),
a feature-rich cross-platform Image API library for .NET.

DsImageViewer provides a rich client side JavaScript object model,
see __docs/index.html__ for the client API documentation.

Product highlights:

- Works in all modern browsers including Edge, Chrome, Firefox, Opera, Safari.
- Works with pure JavaScript and frameworks such as Angular, Vue, ASP.NET Core, ASP.NET MVC, HTML5, React and Preact.
- Allows you to extend the viewer behavior and add new functionality using plug-ins.
- Provides a client API for creating and modifying image data.
- Supports raster image formats JPEG, PNG, WEBP, TIFF, GIF, BMP, ICO, and vector SVG format.
- ...and more.

## See it in action

- Go to [Document Solutions Image Viewer demos](https://developer.mescius.com/document-solutions/javascript-image-viewer/demos/)
  to explore the various features of DsImageViewer.
  The demo site allows you to modify the demo code and immediately see the effect of your changes.
- The [Document Solutions for Imaging demos](https://developer.mescius.com/document-solutions/dot-net-imaging-api/demos/)
  can optionally use DsImageViewer to show the sample images 
  (to opt in or out of using DsImageViewer, click the blue "i(nformation)" icon
  in the top right corner of the image preview panel).

## Latest changes

## [9.2.1] - 10-Sep-2026
### Changed
- Removed the obsolete `rotation` plugin and its `./plugins/rotation` package export. Use `PageToolsPlugin` for rotate and flip operations. (DOC-7805)

## [9.2.0] - 14-Aug-2026
### Changed
- Improved accessibility to comply with WCAG Level A and AA: added ARIA labels for toolbar and panel controls, added keyboard support for the image filters panel, and improved the zoom, crop and object properties controls. (DOC-7488, DOC-7505)
### Fixed
- Fixed an issue with Chinese localization language, so the Chinese user interface is now selected with the { language: "zh" } option. (DOC-7695)
- [PaintTools] Fixed an issue where the Brush tool rendered the brush circle without any blur regardless of the Hardness value, and could make the user interface unresponsive while drawing. (DOC-7631)
- [PaintTools] Improved the Clone Stamp tool rendering performance, which made the tool nearly unusable in Safari. (DOC-7646)

See `CHANGELOG.md` for previous release notes.

## Installing and using the viewer

### Installing from npmjs:

```console
npm install @mescius/dsimageviewer
```

The package ships an ES module build with TypeScript definitions, so the viewer and the
optional plugins can be imported directly. Add a host element to your page, e.g.
```<div id="root"></div>```, and create the viewer:

```javascript
import { DsImageViewer } from '@mescius/dsimageviewer';
import { PageToolsPlugin } from '@mescius/dsimageviewer/plugins/pageTools';
import { ImageFiltersPlugin } from '@mescius/dsimageviewer/plugins/imageFilters';
import { PaintToolsPlugin } from '@mescius/dsimageviewer/plugins/paintTools';

const viewer = new DsImageViewer('#root');
viewer.addPlugin(new PageToolsPlugin());
viewer.addPlugin(new ImageFiltersPlugin());
viewer.addPlugin(new PaintToolsPlugin());
```

Import only the plugins you need - each one is a separate module.

### Installing from the zip archive:

The following viewer distribution files are located in the zip archive:
- ```build/README.md``` (this file)
- ```build/CHANGELOG.md```
- ```build/LICENSE```
- ```build/THIRD_PARTY_LICENSES.txt```
- ```build/package.json```
- ```build/index.html```
- ```build/dsimageviewer.js```
- ```build/esm/``` (optional) ES module build of the viewer and plugins
- ```build/docs/``` (optional) Client API documentation
- ```build/plugins/``` (optional) Plugins
- ```build/themes/``` (optional) Theme files
- ```build/types/``` (optional) Type definitions

Copy those files to an appropriate location accessible from the web page where the viewer will live,
e.g. if the files are put in the directory where the web page is, the following HTML can be used to show the viewer:

```HTML
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <meta name="theme-color" content="#000000" />
    <title>Document Solutions Image Viewer Demo</title>
    <script src="dsimageviewer.js"></script>
    <script src="plugins/pageTools.js"></script>
    <script>
      function loadImageViewer(selector) {
        var viewer = new DsImageViewer(selector);
        viewer.addPlugin(new PageToolsPlugin());
      }
    </script>	
  </head>
  <body onload="loadImageViewer('#root')">
    <div id="root"></div>
  </body>
</html>
```

## Licensing

Document Solutions Image Viewer is a commercially licensed product. Please [visit this page](https://developer.mescius.com/document-solutions/licensing) for details.

Assign your deployment key to the `DsImageViewer.LicenseKey` property before you create the viewer:

```javascript
  // Add your license
  DsImageViewer.LicenseKey = 'xxx';
  // Add your code
  var viewer = new DsImageViewer('#root');
```

## Getting more help

Document Solutions Image Viewer is distributed as part of Document Solutions for Imaging .NET.
You can ask any questions about the viewer, or report bugs using the
[Document Solutions for Imaging .NET public forum](https://developer.mescius.com/forums/documents-imaging).

---
# <a id="japanese"></a>DioDocs Imageビューワ
[DioDocs Imageビューワ](https://developer.mescius.jp/diodocs-imaging#image-viewer)は、Webアプリケーションのクライアントサイドで各種画像ファイルを読み込んで表示できる、JavaScriptベースの高性能な画像ビューア兼エディタです。 
## 主な特長
- 画像の表示・編集・保存などをスムーズに行える直感的なユーザーインターフェースを提供します。
- ブラウザ上（クライアントサイドのみ）で動作が完結し、EdgeやChrome、Safariなど、主要なモダンブラウザ上で利用できます。
- 画像データの作成・変更やビューワのUI・動作のカスタマイズを実現するさまざまなクライアントAPIを提供します。
- 主要な画像フォーマットに対応しています。（ラスタ形式：JPEG／PNG／WEBP／TIFF／GIF／BMP／ICO、ベクター形式：SVG）
## 製品情報
本製品は、.NET用ドキュメントAPIライブラリ「DioDocs for Imaging」に同梱されています。
詳細については、下記をご参照ください。
- [製品情報](https://developer.mescius.jp/diodocs-imaging#image-viewer) 
## サンプル
使い方については、下記をご参照ください。
- [デモ](https://docapp.mescius.jp/diodocs/imageviewer/demos/)
## ドキュメント
ドキュメントについては、下記をご参照ください。
- [ヘルプ](https://demo.mescius.jp/diodocs/imageviewer/docs/)
- [APIリファレンス](https://demo.mescius.jp/diodocs/imageviewer/api/)
## インストール方法
```sh
npm install @mescius/dsimageviewer
```
日本語版での動作保証は、日本語版サイトで公開しているバージョンのみとなります。 
## サポート
ナレッジベース、テクニカルサポートについては、下記をご参照ください。
- [サポート＆サービス](https://developer.mescius.jp/support)
- [サブスクリプションサービス利用規約](https://docs.mescius.jp/license/diodocs/diodocs-subscriptionservice.pdf)

---

_The End._