LEADTOOLS JavaScript(Leadtools.Controls)

フレームを表示

ブラウザから独立したImageViewer支持物は、画像データのディスプレイ補間を再サンプリングして、グレーに拡大縮小します。それがオリジナルより小さなサイズで示されるとき、補間を使うことはイメージの質を大きく向上させます。

この具体例は、同じimageで2つの項目を示しているブラウザで動作している画像ビューアーを示します。imageは、300 DPIでスキャンされる一般的な8.5×11インチのドキュメントです。leftの上のimageは、ImageViewerがブラウザ組み込み補間を用いてそれを示す方法です。右の上のimageは、灰色の補間にLEADTOOLS scaleを用いて示されます:

画像データを補間することは、即時性が高い操作でないかもしれません。300 DPI(2550×3300ピクセル)の一般的な8.5×11インチのドキュメントは、ブラウザとデバイスに従い100ミリ秒と1秒の間でどこでも取ります。このように、ImageViewerは、別々のスレッドで補間を実行して、必要に応じて間入性imageで表面を更新するために、JavaScriptウェブワーカー(サポートされるとき、そして、そうでない場合JavaScriptタイムアウト回避方法)を使います。これの全ては自動的に実行されます、そして、アプリケーションはImageViewer.InterpolationModeプロパティを目標値に設定する必要があるだけです。

補間データ

JavaScript MaximumInterpolationSizeプロパティは、どれくらいのデータが補間のために使われなければならないかについて指定するために、整数値をとります。幅か高さがこの値(デフォルトに4096のピクセルである)より大きいならば、その寸法がMaximumInterpolationSize値と一致するまで、ページは下に拡大縮小されます。このように、より少ない入力データは、補間回路に提供されます。このサイズ変更は補間時間の速度を上げることができて、メモリの消費を減らすことができます-しかし、また、弱められた補間結果を提供します。補間メモリの消費を管理するもう一つの方法については、InterpolationRunMode(以下に記す)を参照します。

補間ランモード

JavaScript InterpolationRunModeプロパティは、補間がシーケンシャルに、または、平行で発生するかどうか指定するために、InterpolationRunModeの値をとります。詳細については、「InterpolationRunMode」を参照してください。

補間モード

ImageViewerによってサポートされる補間モードの説明のためのInterpolationModeを参照してください

補間を用いて

アプリケーションで補間を使うために、これらの手順に従います:

  1. 補間は、サポートを画像処理しているLEADTOOLSを用いて実行されます。補間codeを格納するJavaScriptライブラリは、そうですLeadtools.ImageProcessing.Core.js。このファイルがLEADTOOLS JavaScriptライブラリの残りでアプリケーションに含まれることを確認します。

  2. 静的なImageViewer.ImageProcessingLibrariesPathプロパティをファイルがページと比較してあるパスLeadtools.ImageProcessing.Core.jsに設定します。たとえば、jsファイルが「解放」というフォルダの中にあって、そしてImageViewerで補間を使う前に以下のcodeを使うならば:

    
                lt.Controls.ImageViewer.ImageProcessingLibrariesPath = "lib";
                
    
  3. 通常通り、ImageViewerインスタンス(たとえばHTML5とJavaScriptで画像ビューワを使うことからのこのcode)を作成します:

    
                // Get the parent div for the image viewer
                var div = document.getElementById("imageViewerContainer");
                // Create a new image viewer instance
                var createOptions = new lt.Controls.ImageViewerCreateOptions(div);
                var imageViewer = new lt.Controls.ImageViewer(createOptions);
                // Load an image into it
                imageViewer.imageUrl = "http://localhost/images/ocr1.png";
                // Set Pan/Zoom as the interactive mode. Click (touch) and drag to pan, CTRL-Click (pinch) and drag to zoom
                
    
  4. ImageViewer.InterpolationModeの値を目標値に設定します。InterpolationMode.Resampleで補間されることができるビューワで、白黒のimageを設定しました:

    
                imageViewer.InterpolationMode = lt.Controls.InterpolationMode.resample;
                
    
  5. これで終わりです。デモを実行して、imageを外へ(より小さくします)ズームするとき、補間が品質を向上させるために実行することがわかります。拡大・縮小して、補間は適用されます、そして、画像ビューワがウェブワーカーを使っているため、ユーザーインターフェースは敏感なままでいます。

オリジナルのimageが2値画像(1ビット/ピクセルの白黒のimage)であるならば、InterpolationMode.ScaleToGrayを使うことがより良好結果を生むかもしれない点に注意します。しかしほとんどの場合、InterpolationMode.Resampleは白黒画像とカラー画像の両方で機能し、外観やスピードに顕著な違いはありません。常に、使用をお勧めします。

表示サイズのimage結果に関する変換の結果がオリジナルのイメージサイズよりとても小さいとき、補間は起こります。この変換が同じであるかより大きい表示サイズに終わるとき、そしてビューワは補間を使いません。

ImageViewerは必要に応じて補間を開始して、停止します(InterpolationRunModeの範囲内で)、そして、ImageViewer.Interpolationイベントは情報がこのプロセスがいつ開始したかについてにあって発生するか、完了したか、以下のように中止されました:

  1. InterpolationModeInterpolationMode.Noneでないとき、ビューワは示されたimage(または各項目のためのイメージ)のサイズをモニターします。表示サイズがオリジナルのイメージサイズより少なくなるとき、補間イベントはビューワがこのプロセスを開始したことを示すためにInterpolationStatus.Startedステータス同等で発生されます。アプリケーションは、IsCanceledの値をtrueに設定することによって、必要であればいつでも補間を手動で中止することができます。

  2. プロセスが終わっている、そして、データが準備ができているとき、ビューワは各々のimageの表面でこのデータを提出します、そして、補間イベントはInterpolationStatus.Completedステータス同等で再び発生されます。

  3. StartedとCompletedの間の期間内にユーザーがビューワを拡大縮小したり、画像や、ImageViewer.UpdateTransformを呼び出すその他の操作を追加や削除したりすると、Interporationイベントが発生しStatusはInterpolationStatus.Abortedに設定されデータが無視されます。操作は、UpdateTransformが、最新の画像データや変換を使用するための作業を完了した後、再開されます。

  4. エラーが補間の間、発生するならば、補間イベントはエラーステータスInterpolationStatus.Errorとエラーオブジェクトに設定して発生されます。

参照

参照

ImageViewerを用いて
HTML5とJavaScriptによる画像ビューワを用いて
画像ビューワコンポーネント
画像ビューワ要素モード
アプリケーションの複数の画像ビューアーを用いて
画像ビューワ外観
画像ビューワの項目
画像ビューワの境界と変換
画像ビューワの変換
画像ビューワのレイアウト
画像ビューワのレンダリング
画像ビューワのスクローリング
画像ビューワの対話モード
画像ビューワのそのほかのオプション
画像ビューワのシングルアイテムモード
画像ビューワのドラッグ&ドロップ