DioDocs for Imaging クイックスタート！（Imageビューワ）

「DioDocs for Imaging（ディオドック）」のImageビューワは、Webアプリケーションで画像の表示および編集を可能にするJavaScriptベースのビューワです。クライアントサイドで画像の表示・編集・加工・保存が可能で、必要に応じてプラグインを追加して機能を拡張することにも対応しています。本記事では、Imageビューワの基本的な機能をコードを交えつつ紹介します。

Imageビューワの機能・特長

ブラウザだけで画像を表示・編集

クライアントサイド（ブラウザ側）だけで表示から編集、保存までを行うことができます。Imageビューワのツールバーから以下のようなビューワとしての基本操作が標準で行えます。

画像の表示・操作：ズーム（拡大・縮小）、全画面表示
画像の入出力：画像の読み込み・保存、印刷

なお、ブラウザはEdge／Chrome／Firefox／Safariといった主要なモダンブラウザに対応しています。

マルチフレーム画像にも対応

Imageビューワでは、業務システムで使われる標準的な画像フォーマット（JPEG、PNG、BMP、GIF、WebP、TIFF、ICO、SVG）に対応しています。アニメーションGIFやマルチページTIFFなどのページの移動や指定も行うことが可能です。

豊富な画像編集機能を実装可能

Imageビューワ自体の基本機能は非常に軽量に設計されています。画像の回転や色調補正、フィルターの適用、ペイント（図形やテキスト）などの編集機能は「プラグイン」として実装されており、要件に応じて必要な機能だけを選択して追加することができます。

ページツールプラグイン：回転、反転、切り抜き、リサイズ
ペイントツールプラグイン：テキスト、フリーハンド、図形の描画、色調補正（明るさ、コントラスト、彩度）、エフェクト（ぼかし、モザイク）
画像フィルタープラグイン：サイドパネルを使用して画像に各種エフェクトを適用

「元に戻す（アンドゥ）」「やり直す（リドゥ）」に対応

Imageビューワでは、画像の編集操作が履歴として記録されます。この編集履歴を利用して、画像の編集操作を元に戻したり、やり直したりすることが可能です。

WebアプリケーションにImageビューワを実装する

まず、Visual Studio Codeを起動してターミナルでプロジェクトのフォルダimageviewer-quickstartを作成してimageviewer-quickstartフォルダに移動します。

mkdir imageviewer-quickstart
cd imageviewer-quickstart

npm installコマンドを使用してImageビューワのパッケージをインストールします。

npm install @mescius/dsimageviewer@9.0.3

index.htmlを作成してbody要素にImageビューワを表示するためのdiv要素を追加します。さらにscript要素を追加してImageビューワ（dsimageviewer.js）を設定します。

<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="utf-8">
    <title>Imageビューワクイックスタート</title>
    <script src="./node_modules/@mescius/dsimageviewer/dsimageviewer.js" type="text/javascript"></script>
    <script src="./index.js" type="text/javascript"></script> 
</head>

<body>
    <div id="imageviewer"></div>
</body>

</html>

index.jsを作成してImageビューワで表示する画像ファイルを設定します。

window.onload =  function() {
  const viewer = new DsImageViewer("#imageviewer");  
  viewer.open("./sample1.jpg");
}

ローカルで動作確認するための開発用のサーバーとして、Visual Studio Codeの拡張機能「Live Server」をインストールします。その後、index.htmlを右クリックして、［Open with Live Server］を実行します。

実行すると、Imageビューワで読み込んだ画像ファイルが表示されます。

ツールバーからローカルの画像を指定して表示したり、表示している画像をローカルに保存することができます。また、画像の表示倍率を変更することも可能です。

マルチページTIFFやアニメーションGIFを読み込んだ場合は、ツールバーにページナビゲーションを行うためのボタンが表示されます。

プラグインを追加する

プラグインを追加するには、対象となるプラグインのJSファイルを読み込む必要があります。JSファイルはImageビューワのパッケージ内にある「plugins」フォルダに格納されています。

pageTools.js：ページツールプラグイン
paintTools.js：ペイントツールプラグイン
imageFilters.js：画像フィルタープラグイン

index.htmlにscript要素を追加して各プラグイン（pageTools.js、paintTools.js、imageFilters.js）を設定します。

<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="utf-8">
    <title>Imageビューワクイックスタート</title>
    <script src="./node_modules/@mescius/dsimageviewer/dsimageviewer.js" type="text/javascript"></script>
    <script src="./node_modules/@mescius/dsimageviewer/plugins/pageTools.js" type="text/javascript"></script>
    <script src="./node_modules/@mescius/dsimageviewer/plugins/paintTools.js" type="text/javascript"></script>
    <script src="./node_modules/@mescius/dsimageviewer/plugins/imageFilters.js" type="text/javascript"></script>
    <script src="./index.js" type="text/javascript"></script> 
</head>

<body>
    <div id="imageviewer"></div>
</body>

</html>

index.jsでaddPluginメソッドを用いてプラグインをツールバーに追加します。

window.onload =  function() {
  const viewer = new DsImageViewer("#imageviewer");  

  viewer.addPlugin(new PageToolsPlugin({ 
    toolbarLayout: ["rotate-image", "flip-horizontal", "flip-vertical", "crop-image", "resize-image"]
  }));
  viewer.addPlugin(new PaintToolsPlugin());
  viewer.addPlugin(new ImageFiltersPlugin());
  
  viewer.open("./sample1.jpg");
}

index.htmlを右クリックして、［Open with Live Server］を実行します。実行すると、Imageビューワのツールバーにプラグインのボタンが表示されます。また、サイドパネルに画像フィルターのアイコンが表示されます。