LEADTOOLS JavaScript(Leadtools)

ImageProcessingオブジェクト。

フレームを表示
サンプル 
メンバ 
HTML5 ImageDataの上でサポートを画像処理に提供します。
構文
function Leadtools.ImageProcessing() 
解説

LEADTOOLS JavaScript ImageProcessingクラスにより、HTML5 ImageDataオブジェクト上でさまざまな画像処理コマンドを実行できます。

ImageProcessingは、HTML5 Webワーカーを使用してコマンドを別々のスレッドで実行します。ブラウザがWebワーカーをサポートしていない場合は、同じスレッドで動作がエミュレートされます。RunInMainThreadプロパティは、ウェブワーカーを使わないで、現在のスレッドでコマンドを実行しないためにコマンドを強制するのに用いられることができます。

Webワーカーはその性質上、コードビハインドを別のJavaScriptファイルに格納することを求めます。このファイルは、ページスクリプトの一部である必要はありません;代わりに、コマンドが実行されるとき、それはダイナミックにロードされます。

画像処理コマンドを実行するために、これらの手順に従います:

  1. ImageProcessingの新しいインスタンスを作成します

  2. JSFilePathプロパティでJavaScriptファイル名を使用に設定します。サポートされたファイル名のリストについては、LEADTOOLS JavaScript画像処理を参照します

  3. コマンドと任意の必須の引数で目的のコマンド名を設定します。サポートされたコマンド名と引数のリストのために上のトピックを参照してください

  4. ImageDataプロパティでソースHTML5キャンバスImageDataオブジェクトを設定します。この画像データは、アプリケーション内のキャンバスの描画コンテキストから、またはLEADTOOLS ImageViewerから取得できます。

  5. 完了されたイベントにサブスクライブします。ウェブワーカーがソースデータ(この場合、ソース画像データ)を変更するのを許さないため、これはオプションでありません。イベントは、更新された画像データを格納します。コマンドがパラメータを外へ格納するならば、同様にイベントデータから問い合わせることができます

  6. 必要に応じて、中間報告を得るために、進捗イベントにサブスクライブします

  7. 実行されたメソッドを呼び出します

  8. コマンドが終わるとき、完了されたイベントは発生して、描画しているコンテキストへと画像データを設定しました。コマンドがパラメータを外へ格納するならば、同様にイベントデータから問い合わせることができます

  9. 最後に、Runが呼び出されるとはいつでも、Abortを呼び出して現在の操作を中止できます。オリジナルデータは、影響を受けないでしょう

上記のいずれの間でも、エラーが発生するとErrorイベントが発生しerrorにはエラーオブジェクトが格納されます。

サンプル

このサンプルは、カンバスの上で画像処理を実行する方法を示します。

<!DOCTYPE html>
<html>
<head>
   <title>Image Processing Test</title>
   <meta http-equiv="content-type" content="text/html; charset=utf-8" />
   <script type="text/javascript" src="Scripts/mscorlib.debug.js"></script>
   <script type="text/javascript" src="Scripts/Leadtools.js"></script>
   <script type="text/javascript">
      (function () {
         var imageLoaded = false;
         var imageProcessing;

         function updateUIState() {
            document.getElementById("resetButton").disabled = !imageLoaded;
            document.getElementById("runButton").disabled = !imageLoaded;
         }

         function loadImage() {

            // Load the image
            var imgElement = document.createElement("img");
            var load = null;
            imageLoaded = false;

            load = function () {
               imgElement.removeEventListener("load", load, false);

               // Draw the image on canvas
               var myCanvas = document.getElementById("myCanvas");
               myCanvas.width = imgElement.naturalWidth;
               myCanvas.height = imgElement.naturalHeight;
               var context = myCanvas.getContext("2d");
               context.drawImage(imgElement, 0, 0);

               imageLoaded = true;
               updateUIState();
            };

            imgElement.addEventListener("load", load, false);

            imgElement.src = "Images/24.png";
            updateUIState();
         }

         function runImageProcessing() {

            // If we are running, abort
            if (imageProcessing.get_isRunning()) {
               imageProcessing.abort();
               document.getElementById("runButton").value = "Run";
               return;
            }

            // Run the command

            // Get the name of the command
            var ipSelect = document.getElementById("ipSelect");
            var index = ipSelect.selectedIndex;
            var command = ipSelect.options[index].text;

            // Get the source canvas image data
            var myCanvas = document.getElementById("myCanvas");
            var context = myCanvas.getContext("2d");
            var imgData = context.getImageData(0, 0, myCanvas.width, myCanvas.height);

            // Set the command
            imageProcessing.set_command(command);

            // The source image data
            imageProcessing.set_imageData(imgData);

            // Set the arguments
            var arguments = imageProcessing.get_arguments();

            // If this is the fill command, then set the color
            if (command == "Fill") {
               // Set the fill color, dark red in this case, the format is 0x AA RR GG BB
               arguments["color"] = 0xFF7F0000;
            } else {
               // No, clear the arguments.
               Object.clearKeys(arguments);
            }

            // Run the command
            document.getElementById("runButton").value = "Abort";

            imageProcessing.run();
         }

         function imageProcessing_Progress(sender, e) {
            // Update the progress label
            var progressLabel = document.getElementById("progressLabel");
            var percentage = e.get_percentage();
            progressLabel.textContent = percentage + "%";
         }

         function imageProcessing_Completed(sender, e) {
            // Get the result and update the canvas
            var imgData = e.get_imageData();
            var myCanvas = document.getElementById("myCanvas");
            var context = myCanvas.getContext("2d");
            context.putImageData(imgData, 0, 0);

            document.getElementById("runButton").value = "Run";
         }

         function updateProgress() {
            if (document.getElementById("progressCheckBox").checked) {
               // Hook to the Progress and Completed events
               if (lt.LTHelper.supportsWebWorker) {
                  imageProcessing.add_progress(imageProcessing_Progress);
               }
               else {
                  alert("Web workers are not supported by this browser. Callbacks will be disabled");
               }
            } else {
               imageProcessing.remove_progress(imageProcessing_Progress);
            }
         }

         function runDemo() {
            window.onload = function () {
               // Add the button handlers
               document.getElementById("resetButton").addEventListener("click", loadImage, false);
               document.getElementById("runButton").addEventListener("click", runImageProcessing, false);
               document.getElementById("progressCheckBox").addEventListener("click", updateProgress, false);

               // Initialize the LEADTOOLS Image Processing class
               imageProcessing = new lt.ImageProcessing();
               imageProcessing.set_jsFilePath("Scripts/Leadtools.ImageProcessing.Main.js");

               // Hook to the Completed and (optionally) Progress event
               imageProcessing.add_completed(imageProcessing_Completed);
               updateProgress();

               // Load the image
               loadImage();
            }
         }

         runDemo();
      })();
   </script>
</head>
<body>
   <div>
      <input type="button" id="resetButton" value="Reset" />
      <label for="ipSelect">Image Processing:</label>
      <select id="ipSelect">
         <option>Flip</option>
         <option>Reverse</option>
         <option>Fill</option>
      </select>
      <label for="progressCheckBox">Use progress</label>
      <input type="checkbox" id="progressCheckBox" checked="checked"/>
      <input type="button" id="runButton" value="Run" />
      <label id="progressLabel">0%</label>
   </div>
   <div>
      <canvas id="myCanvas" />
   </div>
</body>
</html>
参照

参照

ImageProcessingメンバ
Leadtools名前空間