LEADTOOLS JavaScript(Leadtools.Controls)

フレームを表示

LEADTOOLSのJavaScript画像処理のための主要なクラスは、Leadtools.ImageProcessingです。HTML 5 ImageDataオブジェクトでの画像処理の実行方法についての詳細は、このクラスを参照してください。

LEADTOOLSは、以下の画像処理JavaScriptファイル付きで出荷します:

Leadtools.ImageProcessing.Main.js

このファイルは、以下のコマンドを格納します:

フリップ

垂直にimageを上下に反転します。コマンドパラメーターは以下のとおりです。

メンバ
ImageProcessing.Command

「フリップ」

ImageProcessing.Arguments

使用されません。

ImageProcessingCompletedEventArgs.Results

使用されません。

サンプル:カンバスを上下に反転します。


             var myCanvas = document.getElementById("myCanvas");
             var context = myCanvas.getContext("2d");
             var imageProcessing = new lt.ImageProcessing();
             imageProcessing.jsFilePath = "Scripts/Leadtools.ImageProcessing.Main.js";
             imageProcessing.command = "Flip";
             imageProcessing.imageData = context.getImageData(0, 0, myCanvas.width, myCanvas.height);
             imageProcessing.completed.add(function(sender, e) {
                context.putImageData(e.imageData, 0, 0);
             });
             imageProcessing.run();
             

リバース

水平にimageを上下に反転します。コマンドパラメーターは以下のとおりです。

メンバ
ImageProcessing.Command

「リバース」

ImageProcessing.Arguments

使用されません。

ImageProcessingCompletedEventArgs.Results

使用されません。

サンプル:カンバスを逆にします。


             var myCanvas = document.getElementById("myCanvas");
             var context = myCanvas.getContext("2d");
             var imageProcessing = new lt.ImageProcessing();
             imageProcessing.jsFilePath = "Scripts/Leadtools.ImageProcessing.Main.js";
             imageProcessing.command = "Reverse";
             imageProcessing.imageData = context.getImageData(0, 0, myCanvas.width, myCanvas.height);
             imageProcessing.completed.add(function(sender, e) {
                context.putImageData(e.imageData, 0, 0);
             });
             imageProcessing.run();
             

塗りつぶし

画像を単色で塗りつぶします。コマンドパラメーターは以下のとおりです。

メンバ
ImageProcessing.Command

「塗りつぶし」

ImageProcessing.Arguments

「カラー」:AARRGGBB形式(例えば赤のための0xFFFF0000、緑のための0xFF00FF00と青などのための0xFF0000FF)で色値を格納している数。

ImageProcessingCompletedEventArgs.Results

使用されません。

サンプル:キャンバスを青で塗りつぶします。


             var myCanvas = document.getElementById("myCanvas");
             var context = myCanvas.getContext("2d");
             var imageProcessing = new lt.ImageProcessing();
             imageProcessing.jsFilePath = "Scripts/Leadtools.ImageProcessing.Main.js";
             imageProcessing.command = "Fill";
             imageProcessing.arguments["color"] = 0xFF0000FF;
             imageProcessing.imageData = context.getImageData(0, 0, myCanvas.width, myCanvas.height);
             imageProcessing.completed.add(function(sender, e) {
                context.putImageData(e.imageData, 0, 0);
             });
             imageProcessing.run();
             

Leadtools.ImageProcessing.Color.js

このファイルは、以下のコマンドを格納します:

invert

imageの色を反転します。コマンドパラメーターは以下のとおりです。

メンバ
ImageProcessing.Command

「invert」

ImageProcessing.Arguments

使用されません。

ImageProcessingCompletedEventArgs.Results

使用されません。

サンプル:カンバスの色を反転します。


             var myCanvas = document.getElementById("myCanvas");
             var context = myCanvas.getContext("2d");
             var imageProcessing = new lt.ImageProcessing();
             imageProcessing.jsFilePath = "Scripts/Leadtools.ImageProcessing.Color.js";
             imageProcessing.command = "Invert";
             imageProcessing.imageData = context.getImageData(0, 0, myCanvas.width, myCanvas.height);
             imageProcessing.completed.add(function(sender, e) {
                context.putImageData(e.imageData, 0, 0);
             });
             imageProcessing.run();
             

ColorCount

imageで一意な色の数を取得します。画像データは、影響を受けません。コマンドパラメーターは以下のとおりです。

メンバ
ImageProcessing.Command

「ColorCount」

ImageProcessing.Arguments

使用されません。

ImageProcessingCompletedEventArgs.Results

「colorCount」:imageで一意な色のカウントを格納している数。

サンプル:カンバスで一意な色の数を数えます。


             var myCanvas = document.getElementById("myCanvas");
             var context = myCanvas.getContext("2d");
             var imageProcessing = new lt.ImageProcessing();
             imageProcessing.jsFilePath = "Scripts/Leadtools.ImageProcessing.Color.js";
             imageProcessing.command = "ColorCount";
             imageProcessing.imageData = context.getImageData(0, 0, myCanvas.width, myCanvas.height);
             imageProcessing.completed.add(function(sender, e) {
                var count = e.results["colorCount"];
                alert("The canvas contains " + count + " unique color(s)");
             });
             imageProcessing.run();
             

StretchHistogram

imageのヒストグラムを引き伸ばします。コマンドパラメーターは以下のとおりです。

メンバ
ImageProcessing.Command

「StretchHistogram」

ImageProcessing.Arguments

使用されません。

ImageProcessingCompletedEventArgs.Results

使用されません。

サンプル:カンバスのヒストグラムを引き伸ばします。


             var myCanvas = document.getElementById("myCanvas");
             var context = myCanvas.getContext("2d");
             var imageProcessing = new lt.ImageProcessing();
             imageProcessing.jsFilePath = "Scripts/Leadtools.ImageProcessing.Color.js";
             imageProcessing.command = "StretchHistogram";
             imageProcessing.imageData = context.getImageData(0, 0, myCanvas.width, myCanvas.height);
             imageProcessing.completed.add(function(sender, e) {
                context.putImageData(e.imageData, 0, 0);
             });
             imageProcessing.run();
             

AdaptiveContrast

適応コントラスト機能強化(ACE)を、元々はコントラストで低かったリージョンに対して実行します。コマンドパラメーターは以下のとおりです。

メンバ
ImageProcessing.Command

「AdaptiveContrast」

ImageProcessing.Arguments

「寸法」:ピクセル単位で、フィルタリングする(寸法×寸法)ために使われる近傍の寸法。範囲は、1から無限です。

「量」:調整係数値。範囲は、無限に100からです。

「型」:調整メソッド。指数関数の場合は1。線形の場合は2。

ImageProcessingCompletedEventArgs.Results

使用されません。

サンプル:カンバスの上で適応的コントラスト強調(ACE)を実行します。


             var myCanvas = document.getElementById("myCanvas");
             var context = myCanvas.getContext("2d");
             var imageProcessing = new lt.ImageProcessing();
             imageProcessing.jsFilePath = "Scripts/Leadtools.ImageProcessing.Color.js";
             imageProcessing.command = "AdaptiveContrast";
             imageProcessing.arguments["dimension"] = 3;
             imageProcessing.arguments["amount"] = 500;
             imageProcessing.arguments["type"] = 1;
             imageProcessing.imageData = context.getImageData(0, 0, myCanvas.width, myCanvas.height);
             imageProcessing.completed.add(function(sender, e) {
               context.putImageData(e.imageData, 0, 0);
             });
             imageProcessing.run();
             

HistogramEqualize

指定されたカラースペースに基づくimageで、ピクセルの数を線形化します。コマンドパラメーターは以下のとおりです。

メンバ
ImageProcessing.Command

「HistogramEqualize」

ImageProcessing.Arguments

「型」:型は、どのカラースペースを平均化するべきかについて示します。RGBの場合は1。YUVの場合は2。グレーの場合は4。

ImageProcessingCompletedEventArgs.Results

使用されません。

サンプル:カンバスにHistogramEqualizeコマンドを適用します。


             var myCanvas = document.getElementById("myCanvas");
             var context = myCanvas.getContext("2d");
             var imageProcessing = new lt.ImageProcessing();
             imageProcessing.jsFilePath = "Scripts/Leadtools.ImageProcessing.Color.js";
             imageProcessing.command = "HistogramEqualize";
             imageProcessing.arguments["type"] = 1;
             imageProcessing.imageData = context.getImageData(0, 0, myCanvas.width, myCanvas.height);
             imageProcessing.completed.add(function(sender, e) {
               context.putImageData(e.imageData, 0, 0);
             });
             imageProcessing.run();
             

GammaCorrect

明度値をマップするのに用いられるガンマ定数を変更することによって、imageで色の強度を調節します。コマンドパラメーターは以下のとおりです。

メンバ
ImageProcessing.Command

「GammaCorrect」

ImageProcessing.Arguments

「ガンマ」:ガンマ値を表している整数。範囲は、無限に1です。

ImageProcessingCompletedEventArgs.Results

使用されません。

サンプル:カンバスにGammaCorrectコマンドを適用します。


             var myCanvas = document.getElementById("myCanvas");
             var context = myCanvas.getContext("2d");
             var imageProcessing = new lt.ImageProcessing();
             imageProcessing.jsFilePath = "Scripts/Leadtools.ImageProcessing.Color.js";
             imageProcessing.command = "GammaCorrect";
             imageProcessing.arguments["gamma"] = 1000;
             imageProcessing.imageData = context.getImageData(0, 0, myCanvas.width, myCanvas.height);
             imageProcessing.completed.add(function(sender, e) {
               context.putImageData(e.imageData, 0, 0);
             });
             imageProcessing.run();
             

AutoColorLevel

imageに数種類の自動カラーレベル調整の1つを適用します。コマンドパラメーターは以下のとおりです。

メンバ
ImageProcessing.Command

「AutoColorLevel」

ImageProcessing.Arguments

「型」:実行するレベリングの型を示す値。レベルの場合は1。Contrastの場合は2。Intensityの場合は3。

「フラグ」:メソッドがimageを処理するかどうかについて示すフラグ。Noneの場合は0。NoProcessの場合は4。

「blackClip」:(オプション)画像からクリップする黒ピクセルのパーセンテージを表す値。1パーセントの1/100単位。0から10000(100%を表す)にわたります。デフォルト値は50です。黒ピクセルの0.5をクリップします。

「whiteClip」:オプション)画像からクリップする白ピクセルのパーセンテージを表す値。1パーセントの1/100単位。0から10000(100%を表す)にわたります。デフォルト値は50です。白ピクセルの0.5をクリップします。

ImageProcessingCompletedEventArgs.Results

「マスター」:Masterチャネルのためにカラーレベル調整情報を格納しているObject。メンバは以下の通りです:minInput、maxInput、minOutput、maxOutputとガンマ。

「赤」:Redチャネルのためにカラーレベル調整情報を格納しているObject。メンバは以下の通りです:minInput、maxInput、minOutput、maxOutputとガンマ。

「緑」:Greenチャネルのためにカラーレベル調整情報を格納しているObject。メンバは以下の通りです:minInput、maxInput、minOutput、maxOutputとガンマ。

「青」:Blueチャネルのためにカラーレベル調整情報を格納しているObject。メンバは以下の通りです:minInput、maxInput、minOutput、maxOutputとガンマ。

サンプル:カンバスにAutoColorLevelコマンドを適用します。


             var myCanvas = document.getElementById("myCanvas");
             var context = myCanvas.getContext("2d");
             var imageProcessing = new lt.ImageProcessing();
             imageProcessing.jsFilePath = "Scripts/Leadtools.ImageProcessing.Color.js";
             imageProcessing.command = "AutoColorLevel";
             imageProcessing.arguments["type"] = 3;
             imageProcessing.arguments["flag"] = 0;
             imageProcessing.arguments["blackClip"] = 1000;
             imageProcessing.arguments["whiteClip"] = 1000;
             imageProcessing.imageData = context.getImageData(0, 0, myCanvas.width, myCanvas.height);
             imageProcessing.completed.add(function(sender, e) {
               context.putImageData(e.imageData, 0, 0);
               var master = e.results.master;
               if (master != null) {
                  alert("master:" + "\n" +
                     "MinInput: " + master.minInput + "\n" +
                     "MaxInput: " + master.maxInput + "\n" +
                     "MinOutput: " + master.minOutput + "\n" +
                     "MaxOutput: " + master.maxOutput + "\n" +
                     "Gamma: " + master.gamma + "\n");
               }
             });
             imageProcessing.run();
             

カラーレベルの

imageにカラーレベル調整を適用します。それは、imageシャドウ、中間色とハイライトを変更します。コマンドパラメーターは以下のとおりです。

メンバ
ImageProcessing.Command

「ColorLevel」

ImageProcessing.Arguments

「フラグ」:レベル調整されているチャネルを示すフラグ。赤チャネルは1。緑チャネルは16。青チャネルは256。マスターチャネルは4096。すべての場合は4369。

「masterChannelColorLevelData」:ColorLevelコマンドで使われるマスターチャネルのためのカラーレベル調整情報Object。メンバは以下の通りです:minInput、maxInput、minOutput、maxOutputとガンマ。(入出力の最小最大値:0~255。ガンマ値:1~無限。)

「redChannelColorLevelData」:ColorLevelコマンドで使われる赤いチャネルのためのカラーレベル調整情報Object。メンバは以下の通りです:minInput、maxInput、minOutput、maxOutputとガンマ。(入出力の最小最大値:0~255。ガンマ値:1~無限。)

「greenChannelColorLevelData」:ColorLevelコマンドで使われる緑チャネルのためのカラーレベル調整情報Object。メンバは以下の通りです:minInput、maxInput、minOutput、maxOutputとガンマ。(入出力の最小最大値:0~255。ガンマ値:1~無限。)

「blueChannelColorLevelData」:ColorLevelコマンドで使われる青チャネルのためのカラーレベル調整情報Object。メンバは以下の通りです:minInput、maxInput、minOutput、maxOutputとガンマ。(入出力の最小最大値:0~255。ガンマ値:1~無限。)

ImageProcessingCompletedEventArgs.Results

使用されません。

サンプル:カンバスにColorLevelコマンドを適用します。


             var myCanvas = document.getElementById("myCanvas");
             var context = myCanvas.getContext("2d");
             var imageProcessing = new lt.ImageProcessing();
             imageProcessing.jsFilePath = "Scripts/Leadtools.ImageProcessing.Color.js";
             imageProcessing.command = "ColorLevel";
             var myRedChannelColorLevelData = new Object();
             myRedChannelColorLevelData.minInput = 20;
             myRedChannelColorLevelData.maxInput = 200;
             myRedChannelColorLevelData.minOutput = 50;
             myRedChannelColorLevelData.maxOutput = 150;
             myRedChannelColorLevelData.gamma = 300;
             imageProcessing.arguments["redChannelColorLevelData"] = myRedChannelColorLevelData;
             imageProcessing.arguments["flag"] = 1;
             imageProcessing.imageData = context.getImageData(0, 0, myCanvas.width, myCanvas.height);
             imageProcessing.completed.add(function(sender, e) {
               context.putImageData(e.imageData, 0, 0);
             });
             imageProcessing.run();
             

ContrastBrightnessIntensity

imageのContrast/Brightness/Intensity値を変更します。コマンドパラメーターは以下のとおりです。

メンバ
ImageProcessing.Command

「ContrastBrightnessIntensity」

ImageProcessing.Arguments

「コントラスト」:コントラストを表している値。値の範囲は、-1000~1000。

「明度」:明度を表している値。値の範囲は、-1000~1000。

「強度」:強度を表している値。値の範囲は、-1000~1000。

ImageProcessingCompletedEventArgs.Results

使用されません。

サンプル:カンバスのContrast/Brightness/Intensity値を変更します。


             var myCanvas = document.getElementById("myCanvas");
             var context = myCanvas.getContext("2d");
             var imageProcessing = new lt.ImageProcessing();
             imageProcessing.jsFilePath = "Scripts/Leadtools.ImageProcessing.Color.js";
             imageProcessing.command = "ContrastBrightnessIntensity";
             imageProcessing.arguments["contrast"] = 500;
             imageProcessing.arguments["brightness"] = 500;
             imageProcessing.arguments["intensity"] = 500;
             imageProcessing.imageData = context.getImageData(0, 0, myCanvas.width, myCanvas.height);
             imageProcessing.completed.add(function(sender, e) {
               context.putImageData(e.imageData, 0, 0);
             });
             imageProcessing.run();
             

ChangeHueSaturationIntensity

imageのHue/Saturation/Intensity値を変更します。コマンドパラメーターは以下のとおりです。

メンバ
ImageProcessing.Command

「ChangeHueSaturationIntensity」

ImageProcessing.Arguments

「色相」:色相値。値の範囲は、-18000~18000。

「彩度」:彩度値。値の範囲は、-1000~1000。

「強度」:明度値。値の範囲は、-1000~1000。

「hsiData」:カラーに関する情報を提供するObjectsの(オプション)配列は、変動します。オブジェクトメンバ:色相(-18000~18000)、彩度(-1000~1000)、強度(-1000~1000)、innerLow(-359~359)、innerHigh(-359~359)、outerLow(-359~359)とouterHigh(-359~359)

ImageProcessingCompletedEventArgs.Results

使用されません。

サンプル:カンバスのHue/Saturation/Intensity値を変更します。


             var myCanvas = document.getElementById("myCanvas");
             var context = myCanvas.getContext("2d");
             var imageProcessing = new lt.ImageProcessing();
             imageProcessing.jsFilePath = "Scripts/Leadtools.ImageProcessing.Color.js";
             imageProcessing.command = "ChangeHueSaturationIntensity";
             imageProcessing.arguments["hue"] = 500;
             imageProcessing.arguments["saturation"] = 500;
             imageProcessing.arguments["intensity"] = 500;
             var hsiData = new Array(1);
             hsiData[0] = new Object();
             hsiData[0].intensity = arguments["intensity"];
             hsiData[0].saturation = arguments["saturation"];
             hsiData[0].hue = arguments["hue"];
             hsiData[0].outerLow = 0;
             hsiData[0].outerHigh = 359;
             hsiData[0].innerLow = 90;
             hsiData[0].innerHigh = 180;
             imageProcessing.arguments["hsiData"] = hsiData;
             imageProcessing.imageData = context.getImageData(0, 0, myCanvas.width, myCanvas.height);
             imageProcessing.completed.add(function(sender, e) {
               context.putImageData(e.imageData, 0, 0);
             });
             imageProcessing.run();
             

Leadtools.ImageProcessing.Effects.js

このファイルは、以下のコマンドを格納します:

GaussianFilter

指定されたimageにガウスフィルタを適用することによって、imageをなめらかにするか、ぼかします。コマンドパラメーターは以下のとおりです。

メンバ
ImageProcessing.Command

「GaussianFilter」

ImageProcessing.Arguments

「半径」:半径値。無限への1。

ImageProcessingCompletedEventArgs.Results

使用されません。

サンプル:カンバスにGaussianFilterコマンドを適用します。


             var myCanvas = document.getElementById("myCanvas");
             var context = myCanvas.getContext("2d");
             var imageProcessing = new lt.ImageProcessing();
             imageProcessing.jsFilePath = "Scripts/Leadtools.ImageProcessing.Effects.js";
             imageProcessing.command = "GaussianFilter";
             imageProcessing.arguments["radius"] = 10;
             imageProcessing.imageData = context.getImageData(0, 0, myCanvas.width, myCanvas.height);
             imageProcessing.completed.add(function(sender, e) {
               context.putImageData(e.imageData, 0, 0);
             });
             imageProcessing.run();
             

UnsharpMask

アンシャプマスクを適用することによって、imageをシャープにします。コマンドパラメーターは以下のとおりです。

メンバ
ImageProcessing.Command

「UnsharpMask」

ImageProcessing.Arguments

「半径」:半径値。値は、無限に1から変動します。

「量」:量値。値は、無限に0から変動します。

「しきい値」:しきい値。値は、0から255にわたります。

「カラータイプ」:カラータイプ値。RGBの場合は1。YUVの場合は2。

ImageProcessingCompletedEventArgs.Results

使用されません。

サンプル:カンバスにUnsharpMaskコマンドを適用します。


             var myCanvas = document.getElementById("myCanvas");
             var context = myCanvas.getContext("2d");
             var imageProcessing = new lt.ImageProcessing();
             imageProcessing.jsFilePath = "Scripts/Leadtools.ImageProcessing.Effects.js";
             imageProcessing.command = "UnsharpMask";
             imageProcessing.arguments["radius"] = 3;
             imageProcessing.arguments["amount"] = 1000;
             imageProcessing.arguments["threshold"] = 128;
             imageProcessing.arguments["colorType"] = 2;
             imageProcessing.imageData = context.getImageData(0, 0, myCanvas.width, myCanvas.height);
             imageProcessing.completed.add(function(sender, e) {
               context.putImageData(e.imageData, 0, 0);
             });
             imageProcessing.run();
             

SmoothEdges

画像内の粗いエッジを滑らかにします。コマンドパラメーターは以下のとおりです。

メンバ
ImageProcessing.Command

「SmoothEdges」

ImageProcessing.Arguments

「量」:量値。範囲は、0~100です。

「しきい値」:しきい値。範囲は、0~255です。

ImageProcessingCompletedEventArgs.Results

使用されません。

サンプル:カンバスにSmoothEdgesコマンドを適用します。


             var myCanvas = document.getElementById("myCanvas");
             var context = myCanvas.getContext("2d");
             var imageProcessing = new lt.ImageProcessing();
             imageProcessing.jsFilePath = "Scripts/Leadtools.ImageProcessing.Effects.js";
             imageProcessing.command = "SmoothEdges";
             imageProcessing.arguments["amount"] = 50;
             imageProcessing.arguments["threshold"] = 10;
             imageProcessing.imageData = context.getImageData(0, 0, myCanvas.width, myCanvas.height);
             imageProcessing.completed.add(function(sender, e) {
               context.putImageData(e.imageData, 0, 0);
             });
             imageProcessing.run();
             

SpatialFilter

空間フィルタをimageに強要します。コマンドパラメーターは以下のとおりです。

メンバ
ImageProcessing.Command

「SpatialFilter」

ImageProcessing.Arguments
フラグ名
「事前定義」 事前定義空間フィルタを表す整数。
  • EmbossNorthの場合は0。
  • EmbossNorthEastの場合は1。
  • EmbossEastの場合は2。
  • EmbossSouthEastの場合は3。
  • EmbossSouthの場合は4。
  • EmbossSouthWestの場合は5。
  • EmbossWestの場合は6。
  • EmbossNorthWestの場合は7。
  • GradientEdgeEnhancementNorthの場合は8。
  • GradientEdgeEnhancementNorthEastの場合は9。
  • GradientEdgeEnhancementEastの場合は10。
  • GradientEdgeEnhancementSouthEastの場合は11。
  • GradientEdgeEnhancementSouthの場合は12。
  • GradientEdgeEnhancementSouthWestの場合は13。
  • GradientEdgeEnhancementWestの場合は14。
  • GradientEdgeEnhancementNorthWestの場合は15。
  • LaplacianFilter1の場合は16。
  • LaplacianFilter2の場合は17。
  • LaplacianFilter3の場合は18。
  • LaplacianDiagonalの場合は19。
  • LaplacianHorizontalの場合は20。
  • LaplacianVerticalの場合は21。
  • SobelHorizontalの場合は22。
  • SobelVerticalの場合は23。
  • PrewittHorizontalの場合は24。
  • PrewittVerticalの場合は25。
  • ShiftAndDifferenceDiagonalの場合は26。
  • ShiftAndDifferenceHorizontalの場合は27。
  • ShiftAndDifferenceVerticalの場合は28。
  • LineSegmentHorizontalの場合は29。
  • LineSegmentVerticalの場合は30。
  • LineSegmentLeftToRightの場合は31。
  • LineSegmentRightToLeftの場合は32。
「除数」 除数値。0以外は、範囲は負の無限から無限までです。
「偏り」 バイアス値。範囲は、無限に負の無限からです。
「マトリックス」 重み係数の配列。
ImageProcessingCompletedEventArgs.Results

「寸法」:マトリックス寸法値。

サンプル:カンバスにSpatialFilterコマンドを適用します。


             var myCanvas = document.getElementById("myCanvas");
             var context = myCanvas.getContext("2d");
             var imageProcessing = new lt.ImageProcessing();
             imageProcessing.jsFilePath = "Scripts/Leadtools.ImageProcessing.Effects.js";
             imageProcessing.command = "SpatialFilter";
             imageProcessing.arguments["predefined"] = 5; // EmbossSouthWest
             //setting predefined will override other arguments
             //imageProcessing.arguments["matrix"]  = [0, 0, -1, 0, 0, 0, 1, 0, 0];
             //imageProcessing.arguments["divisor"] = 1;
             //imageProcessing.arguments["bias"] = 128;
             imageProcessing.imageData = context.getImageData(0, 0, myCanvas.width, myCanvas.height);
             imageProcessing.completed.add(function(sender, e) {
               context.putImageData(e.imageData, 0, 0);
               alert("Filter dimension: " + e.results.dimension);
             });
             imageProcessing.run();
             

Emboss

画像にエンボス効果を加えます。エンボスの深さと方向を指定できます。コマンドパラメーターは以下のとおりです。

メンバ
ImageProcessing.Command

「Emboss」

ImageProcessing.Arguments

「方向」:見た目の光源の方向を表す整数。ノースのための0、NorthEastのための1、東のための2、SouthEastのための3、南のための4、SouthWestのための5、西のための6、NorthWestのための7

「深さ」:深さ値。範囲は、0~1000です。

ImageProcessingCompletedEventArgs.Results

使用されません。

サンプル:カンバスにEmbossコマンドを適用します。


             var myCanvas = document.getElementById("myCanvas");
             var context = myCanvas.getContext("2d");
             var imageProcessing = new lt.ImageProcessing();
             imageProcessing.jsFilePath = "Scripts/Leadtools.ImageProcessing.Effects.js";
             imageProcessing.command = "Emboss";
             imageProcessing.arguments["direction"] = 5;
             imageProcessing.arguments["depth"] = 500;
             imageProcessing.imageData = context.getImageData(0, 0, myCanvas.width, myCanvas.height);
             imageProcessing.completed.add(function(sender, e) {
               context.putImageData(e.imageData, 0, 0);
             });
             imageProcessing.run();
             

シャープ化

指定されたimageのシャープネスを増減します。コマンドパラメーターは以下のとおりです。

メンバ
ImageProcessing.Command

「シャープ化」

ImageProcessing.Arguments

「シャープネス」:シャープネス。値の範囲は、-1000~1000。

ImageProcessingCompletedEventArgs.Results

使用されません。

サンプル:カンバスにシャープ化コマンドを適用します。


             var myCanvas = document.getElementById("myCanvas");
             var context = myCanvas.getContext("2d");
             var imageProcessing = new lt.ImageProcessing();
             imageProcessing.jsFilePath = "Scripts/Leadtools.ImageProcessing.Effects.js";
             imageProcessing.command = "Sharpen";
             imageProcessing.arguments["sharpness"] = 5;
             imageProcessing.imageData = context.getImageData(0, 0, myCanvas.width, myCanvas.height);
             imageProcessing.completed.add(function(sender, e) {
               context.putImageData(e.imageData, 0, 0);
             });
             imageProcessing.run();
             

BinaryFilter

バイナリフィルタをimageに強要します。コマンドパラメーターは以下のとおりです。

メンバ
ImageProcessing.Command

「BinaryFilter」

ImageProcessing.Arguments

「事前定義」:事前定義バイナリフィルタを表す整数。

  • ErosionOmniDirectionalの場合は0。
  • ErosionHorizontalの場合は1。
  • ErosionVerticalの場合は2。
  • ErosionDiagonalの場合は3。
  • DilationOmniDirectionalの場合は4。
  • DilationHorizontalの場合は5。
  • DilationVerticalの場合は6。
  • DilationDiagonalの場合は7。

「最大限」:フィルタが最大値フィルタであるかどうかについて示すブール値。

「マトリックス」:フィルタ係数の配列。

ImageProcessingCompletedEventArgs.Results

「寸法」:マトリックスのための寸法値。

サンプル:カンバスにBinaryFilterコマンドを適用します。


             var myCanvas = document.getElementById("myCanvas");
             var context = myCanvas.getContext("2d");
             var imageProcessing = new lt.ImageProcessing();
             imageProcessing.jsFilePath = "Scripts/Leadtools.ImageProcessing.Effects.js";
             imageProcessing.command = "BinaryFilter";
             imageProcessing.arguments["predefined"] = 5; // Dilation Horizontal
             //setting predefined will override other arguments
             //imageProcessing.arguments["matrix"]  = [0, 0, -1, 0, 0, 0, 1, 0, 0];
             //imageProcessing.arguments["maximum"] = true;
             imageProcessing.imageData = context.getImageData(0, 0, myCanvas.width, myCanvas.height);
             imageProcessing.completed.add(function(sender, e) {
               context.putImageData(e.imageData, 0, 0);
               alert("Filter dimension: " + e.results.dimension);
             });
             imageProcessing.run();
             

反エイリアシング

指定されたimageのシャープネスを増減します。コマンドパラメーターは以下のとおりです。

メンバ
ImageProcessing.Command

「AntiAliasing」

ImageProcessing.Arguments

「しきい値」:しきい値。範囲は、0~255です。

「寸法」:寸法値。範囲は、無限に1です。

「antiAliasingType」:使用にアンチエイリアスフィルタの型を示す値。

  • Type1の場合は0。
  • Type2の場合は1。
  • Type3の場合は2。
  • 斜線の場合は3。
  • 水平の場合は4。
  • 垂直の場合は5。
ImageProcessingCompletedEventArgs.Results

使用されません。

サンプル:カンバスにAntiAliasingコマンドを適用します。


             var myCanvas = document.getElementById("myCanvas");
             var context = myCanvas.getContext("2d");
             var imageProcessing = new lt.ImageProcessing();
             imageProcessing.jsFilePath = "Scripts/Leadtools.ImageProcessing.Effects.js";
             imageProcessing.command = "AntiAliasing";
             imageProcessing.arguments["threshold"] = 10;
             imageProcessing.arguments["dimension"] = 3;
             imageProcessing.arguments["antiAliasingType"] = 1;
             imageProcessing.imageData = context.getImageData(0, 0, myCanvas.width, myCanvas.height);
             imageProcessing.completed.add(function(sender, e) {
               context.putImageData(e.imageData, 0, 0);
             });
             imageProcessing.run();
             

GetFunctionalLookupTable

ルックアップテーブル(指定された数学関数に基づく)の様々なエントリを更新します。コマンドパラメーターは以下のとおりです。

メンバ
ImageProcessing.Command

「GetFunctionalLookupTable」

ImageProcessing.Arguments

「lookupTableな」:最初のルックアップテーブル配列。ユーザーは、手動でルックアップテーブルの最初で最後の要素を設定しなければなりません。

「スタート」:更新するルックアップテーブルの最初のエントリのインデックス。

「終わり」:更新するルックアップテーブルの最後のエントリのインデックス。

「要因」:要因がフラグパラメーターで指定されている関数操作で適用されることを示す値。

「フラグ」:関数を示すフラグは、ルックアップテーブルを更新しました。指数関数のための0、対数のための1、直線性のための2、シグモイドのための3。

ImageProcessingCompletedEventArgs.Results

「lookupTableな」:更新されたルックアップテーブル配列。

サンプル:ルックアップテーブル配列にGetFunctionalLookupTableコマンドを適用します。


             var imageProcessing = new lt.ImageProcessing();
             imageProcessing.jsFilePath = "Scripts/Leadtools.ImageProcessing.Effects.js";
             imageProcessing.command = "GetFunctionalLookupTable";
             imageProcessing.arguments["threshold"] = 10;
             imageProcessing.arguments["dimension"] = 3;
             imageProcessing.arguments["antiAliasingType"] = 1;
             imageProcessing.completed.add(function(sender, e) {
                var new lookupTable = e.results.lookupTable;
             });
             imageProcessing.run();
             

Leadtools.ImageProcessing.Core.js

MaxFilter

指定された量だけ暗いオブジェクトを侵食します。コマンドパラメーターは以下のとおりです。

メンバ
ImageProcessing.Command

「MaxFilter」

ImageProcessing.Arguments

「寸法」:寸法値。値は、無限に1から変動します。

ImageProcessingCompletedEventArgs.Results

使用されません。

サンプル:カンバスにMaxFilterコマンドを適用します。


             var myCanvas = document.getElementById("myCanvas");
             var context = myCanvas.getContext("2d");
             var imageProcessing = new lt.ImageProcessing();
             imageProcessing.jsFilePath = "Scripts/Leadtools.ImageProcessing.Core.js";
             imageProcessing.command = "MaxFilter";
             imageProcessing.arguments["dimension"] = 3;
             imageProcessing.imageData = context.getImageData(0, 0, myCanvas.width, myCanvas.height);
             imageProcessing.completed.add(function(sender, e) {
               context.putImageData(e.imageData, 0, 0);
             });
             imageProcessing.run();
             

MinFilter

指定された量だけ暗いオブジェクトを広げます。コマンドパラメーターは以下のとおりです。

メンバ
ImageProcessing.Command

「MinFilter」

ImageProcessing.Arguments

「寸法」:寸法値。値は、無限に1から変動します。

ImageProcessingCompletedEventArgs.Results

使用されません。

サンプル:カンバスにMinFilterコマンドを適用します。


             var myCanvas = document.getElementById("myCanvas");
             var context = myCanvas.getContext("2d");
             var imageProcessing = new lt.ImageProcessing();
             imageProcessing.jsFilePath = "Scripts/Leadtools.ImageProcessing.Core.js";
             imageProcessing.command = "MinFilter";
             imageProcessing.arguments["dimension"] = 3;
             imageProcessing.imageData = context.getImageData(0, 0, myCanvas.width, myCanvas.height);
             imageProcessing.completed.add(function(sender, e) {
               context.putImageData(e.imageData, 0, 0);
             });
             imageProcessing.run();
             

輪郭以外のぼかし

imageからスペックルを削除します。通常、このコマンドは、スキャンされたイメージ(FAXイメージなどの)をクリーンアップするのに用いられます。コマンドパラメーターは以下のとおりです。

メンバ
ImageProcessing.Command

「輪郭以外のぼかし」

ImageProcessing.Arguments

使用されません。

ImageProcessingCompletedEventArgs.Results

使用されません。

サンプル:カンバスに輪郭以外のぼかしコマンドを適用します。


             var myCanvas = document.getElementById("myCanvas");
             var context = myCanvas.getContext("2d");
             var imageProcessing = new lt.ImageProcessing();
             imageProcessing.jsFilePath = "Scripts/Leadtools.ImageProcessing.Core.js";
             imageProcessing.command = "Despeckle";
             imageProcessing.imageData = context.getImageData(0, 0, myCanvas.width, myCanvas.height);
             imageProcessing.completed.add(function(sender, e) {
               context.putImageData(e.imageData, 0, 0);
             });
             imageProcessing.run();
             

ResizeInterpolate

目的のサイズに大きさを変更するために、イメージに関して様々な種類のアルゴリズムを適用します。コマンドパラメーターは以下のとおりです。

メンバ
ImageProcessing.Command

「ResizeInterpolate」

ImageProcessing.Arguments

「幅」:新しいimage幅。

「高さ」:新しいimage高さ。

「型」:imageの大きさを変更する際に使われるアルゴリズム型を表す整数。三角形、エルミートのための6、ベルのための7、QuadraticBSplineのための8、CubicBSplineのための9、BoxFilterのための10、ランチョシュのための11、ミッチェルのための12、余弦のための13、Catromのための14、二次式のための15、CubicConvolutionのための16、二本の線のもののための17 = 17、Bresenhamのための18のための5

ImageProcessingCompletedEventArgs.Results

「resultImage」:大きさを変更した後の新しいimage。メンバは以下の通りです:幅(新しいimage幅)、高さ(新しいimage高さ)とデータ(新しいimage画素データ)

サンプル:カンバスにResizeInterpolateコマンドを適用します。


             var myCanvas = document.getElementById("myCanvas");
             var context = myCanvas.getContext("2d");
             var imageProcessing = new lt.ImageProcessing();
             imageProcessing.jsFilePath = "Scripts/Leadtools.ImageProcessing.Core.js";
             imageProcessing.command = "ResizeInterpolate";
             imageProcessing.arguments["width"] = 1024;
             imageProcessing.arguments["height"] = 1024;
             imageProcessing.arguments["type"] = 17; // Bilinear
             imageProcessing.imageData = context.getImageData(0, 0, myCanvas.width, myCanvas.height);
             imageProcessing.completed.add(function(sender, e) {
               var resultImage = e.results.resultImage;
               var canvas = document.createElement("canvas");
               canvas.width = resultImage.width;
               canvas.height = resultImage.height;
            
               var ctx = canvas.getContext("2d");
               var imgData = ctx.createImageData(canvas.width, canvas.height);
               for (var i = 0; i < imgData.data.length; i += 4) {
                  imgData.data[i + 0] = resultImage.data[i + 0];
                  imgData.data[i + 1] = resultImage.data[i + 1];
                  imgData.data[i + 2] = resultImage.data[i + 2];
                  imgData.data[i + 3] = resultImage.data[i + 3];
               }
               ctx.putImageData(imgData, 0, 0);
            
               var src = canvas1.toDataURL("image/png"); // now we get the new image in base64 form
             });
             imageProcessing.run();