LEADTOOLSのJavaScript画像処理のための主要なクラスは、Leadtools.ImageProcessingです。HTML 5 ImageDataオブジェクトでの画像処理の実行方法についての詳細は、このクラスを参照してください。
LEADTOOLSは、以下の画像処理JavaScriptファイル付きで出荷します:
このファイルは、以下のコマンドを格納します:
垂直に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();
このファイルは、以下のコマンドを格納します:
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();
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();
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();
適応コントラスト機能強化(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();
指定されたカラースペースに基づく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();
明度値をマップするのに用いられるガンマ定数を変更することによって、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();
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();
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();
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();
このファイルは、以下のコマンドを格納します:
指定された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();
アンシャプマスクを適用することによって、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();
画像内の粗いエッジを滑らかにします。コマンドパラメーターは以下のとおりです。
メンバ | 値 |
---|---|
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();
空間フィルタをimageに強要します。コマンドパラメーターは以下のとおりです。
メンバ | 値 | ||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|
ImageProcessing.Command |
「SpatialFilter」 |
||||||||||
ImageProcessing.Arguments |
|
||||||||||
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();
画像にエンボス効果を加えます。エンボスの深さと方向を指定できます。コマンドパラメーターは以下のとおりです。
メンバ | 値 |
---|---|
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();
バイナリフィルタをimageに強要します。コマンドパラメーターは以下のとおりです。
メンバ | 値 |
---|---|
ImageProcessing.Command |
「BinaryFilter」 |
ImageProcessing.Arguments |
「事前定義」:事前定義バイナリフィルタを表す整数。
「最大限」:フィルタが最大値フィルタであるかどうかについて示すブール値。 「マトリックス」:フィルタ係数の配列。 |
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」:使用にアンチエイリアスフィルタの型を示す値。
|
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();
ルックアップテーブル(指定された数学関数に基づく)の様々なエントリを更新します。コマンドパラメーターは以下のとおりです。
メンバ | 値 |
---|---|
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();
指定された量だけ暗いオブジェクトを侵食します。コマンドパラメーターは以下のとおりです。
メンバ | 値 |
---|---|
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();
指定された量だけ暗いオブジェクトを広げます。コマンドパラメーターは以下のとおりです。
メンバ | 値 |
---|---|
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();
目的のサイズに大きさを変更するために、イメージに関して様々な種類のアルゴリズムを適用します。コマンドパラメーターは以下のとおりです。
メンバ | 値 |
---|---|
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();