@mescius/dsimageviewer
v9.1.1
Published
Document Solutions Image Viewer
Maintainers
mesciusReadme
Document Solutions Image Viewer and Editor
日本語
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), 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 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 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.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.
[9.0.3] - 03-Mar-2026
Changed
- Updated JPN localization. (DOC-7055)
[9.0.2] - 04-Feb-2026
Fixed
- [macOS] Fixed an issue where empty frames were shown for GIF files in MacOS browsers. (DOC-7331)
[9.0.1] - 23-Jan-2026
Fixed
- Fixed an issue where imageGallery item width and height settings did not affect the displayed thumbnail size in the image gallery dropdown. (DOC-7172)
- Fixed ImageGallery to hide unsupported image formats, preventing broken preview thumbnails from being displayed. (DOC-7173)
[9.0.0] - 05-Dec-2025
Added
- [Text and Objects] [Image Object] Added support for skew transformations. (DOC-7060)
- [Text and Objects] Added ImageGallery dropdown for easier image selection. (DOC-7082)
- [Text and Objects] [Image Object] Added image alignment property.
Fixed
- Fixed unexpected behavior when using Undo with Line or Arrow objects. (DOC-7038)
See CHANGELOG.md for previous release notes.
Installing and using the viewer
Installing from npmjs:
npm install @mescius/dsimageviewerInstalling from the zip archive:
The following viewer distribution files are located in the zip archive:
build/README.md(this file)build/CHANGELOG.mdbuild/THIRD_PARTY_LICENSES.txtbuild/index.htmlbuild/dsimageviewer.jsbuild/plugins/(optional) Pluginsbuild/themes/(optional) Theme filesbuild/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:
<!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>DioDocs Imageビューワ
DioDocs Imageビューワは、Webアプリケーションのクライアントサイドで各種画像ファイルを読み込んで表示できる、JavaScriptベースの高性能な画像ビューア兼エディタです。
主な特長
- 画像の表示・編集・保存などをスムーズに行える直感的なユーザーインターフェースを提供します。
- ブラウザ上（クライアントサイドのみ）で動作が完結し、EdgeやChrome、Safariなど、主要なモダンブラウザ上で利用できます。
- 画像データの作成・変更やビューワのUI・動作のカスタマイズを実現するさまざまなクライアントAPIを提供します。
- 主要な画像フォーマットに対応しています。（ラスタ形式：JPEG／PNG／WEBP／TIFF／GIF／BMP／ICO、ベクター形式：SVG）
製品情報
本製品は、.NET用ドキュメントAPIライブラリ「DioDocs for Imaging」に同梱されています。 詳細については、下記をご参照ください。
サンプル
使い方については、下記をご参照ください。
ドキュメント
ドキュメントについては、下記をご参照ください。
インストール方法
npm install @mescius/dsimageviewer日本語版での動作保証は、日本語版サイトで公開しているバージョンのみとなります。
サポート
ナレッジベース、テクニカルサポートについては、下記をご参照ください。
The End.