@mescius/dsimageviewer
Version:
Document Solutions Image Viewer
138 lines (114 loc) • 6.42 kB
Markdown
# 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 IE11, 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.1.3] - 08-Jul-2026
### Changed
- Minor internal changes.
## [9.1.2] - 24-Jun-2026
### Changed
- Updated the About dialog with the latest product information and links. (DOC-7664)
## [9.1.1] - 04-Jun-2026
## Fixed
- Implemented minor default color themes adjustments. (DOC-7383)
- Fixed minor CSS issues for dialogs in modern Chrome versions. (DOC-7625)
- Fixed an issue where public classes (GcImageViewer, DsImageViewer, ImageFiltersPlugin, PageToolsPlugin, PaintToolsPlugin) were incorrectly documented as variables instead of classes in the API documentation. (DOC-7552)
- Improved compatibility with webkit-based browsers, fixed an issue where in text objects visible text shifted on each keystroke and carried over text from the first text object into newly created ones instead of showing the default placeholder. (DOC-7514)
## [9.1.0] - 05-May-2026
### Added
- Added support for cross-domain iframe licensing. (DOC-7243)
## Fixed
- Various bug fixes and stability improvements.
### See `CHANGELOG.md` for previous release notes.
## Installing and using the viewer
### Installing from npmjs:
```console
npm install @mescius/dsimageviewer
```
### 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/THIRD_PARTY_LICENSES.txt```
- ```build/index.html```
- ```build/dsimageviewer.js```
- ```build/plugins/``` (optional) Plugins
- ```build/themes/``` (optional) Theme files
- ```build/typings/``` (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/rotation.js"></script>
<script>
function loadImageViewer(selector) {
var viewer = new DsImageViewer(selector);
viewer.addPlugin(new RotationPlugin());
}
</script>
</head>
<body onload="loadImageViewer('#root')">
<div id="root"></div>
</body>
</html>
```
---
# <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._