The main class for JavaScript image processing in LEADTOOLS is Leadtools.ImageProcessing. Refer to this class for more information on how to perform image processing on an HTML 5 ImageData object.
LEADTOOLS ships with the following image processing JavaScript files:
This file contains the following commands:
Flips the image vertically. Command parameters:
Member | Values |
---|---|
ImageProcessing.Command |
"Flip" |
ImageProcessing.Arguments |
Not used |
ImageProcessingCompletedEventArgs.Results |
Not used |
Example: Flip a canvas.
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();
Flips the image horizontally. Command parameters:
Member | Values |
---|---|
ImageProcessing.Command |
"Reverse" |
ImageProcessing.Arguments |
Not used |
ImageProcessingCompletedEventArgs.Results |
Not used |
Example: Reverse a canvas.
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();
Fills the image with a color. Command parameters:
Member | Values |
---|---|
ImageProcessing.Command |
"Fill" |
ImageProcessing.Arguments |
"color": A number containing the color value in the AARRGGBB format, such as 0xFFFF0000 for red, 0xFF00FF00 for green and 0xFF0000FF for blue and so on. |
ImageProcessingCompletedEventArgs.Results |
Not used |
Example: Fill a canvas with solid blue.
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();
This file contains the following commands:
Inverts the colors of the image. Command parameters:
Member | Values |
---|---|
ImageProcessing.Command |
"Invert" |
ImageProcessing.Arguments |
Not used |
ImageProcessingCompletedEventArgs.Results |
Not used |
Example: Invert the colors of a canvas.
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();
Gets the number of unique colors in an image. The image data is not affected. Command parameters:
Member | Values |
---|---|
ImageProcessing.Command |
"ColorCount" |
ImageProcessing.Arguments |
Not used |
ImageProcessingCompletedEventArgs.Results |
"colorCount": A number containing the count of unique colors in the image. |
Example: Count the number of unique colors in a canvas.
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();
Stretches the histogram of the image. Command parameters:
Member | Values |
---|---|
ImageProcessing.Command |
"StretchHistogram" |
ImageProcessing.Arguments |
Not used |
ImageProcessingCompletedEventArgs.Results |
Not used |
Example: Stretch the histogram of the canvas.
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();
Performs adaptive contrast enhancement (ACE) to regions that are originally low in contrast. Command parameters:
Member | Values |
---|---|
ImageProcessing.Command |
"AdaptiveContrast" |
ImageProcessing.Arguments |
"dimension": The dimensions of the neighborhood used for filtering (dimension x dimension), in pixels. Range is from 1 to infinity. "amount": The adjustment factor value. Range is from 100 to infinity. "type": The adjustment method. 1 for Exponential, or 2 for Linear |
ImageProcessingCompletedEventArgs.Results |
Not used |
Example: Perform adaptive contrast enhancement (ACE) on the canvas.
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();
Linearizes the number of pixels in an image based on the specified color space. Command parameters:
Member | Values |
---|---|
ImageProcessing.Command |
"HistogramEqualize" |
ImageProcessing.Arguments |
"type": The type indicates which color space to equalize. 1 for RGB, 2 for YUV, or 4 for Gray |
ImageProcessingCompletedEventArgs.Results |
Not used |
Example: Apply the HistogramEqualize command to the canvas.
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();
Adjusts the intensity of colors in an image by changing the gamma constant that is used to map the intensity values. Command parameters:
Member | Values |
---|---|
ImageProcessing.Command |
"GammaCorrect" |
ImageProcessing.Arguments |
"gamma": The integer representing the gamma value. Range is 1 to infinity. |
ImageProcessingCompletedEventArgs.Results |
Not used |
Example: Apply the GammaCorrect command to the canvas.
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();
Applies one of several types of automatic color-leveling to an image. Command parameters:
Member | Values |
---|---|
ImageProcessing.Command |
"AutoColorLevel" |
ImageProcessing.Arguments |
"type": A value that indicates the type of leveling to perform. 1 for Level, or 2 for Contrast, or 3 for Intensity "flag": A flag that indicates whether the method will process the image. 0 for None, or 4 for NoProcess "blackClip": (Optional) value that represents the percentage of black pixels to clip from the image, in hundredths of a percent. Range from 0 to 10000 (which represents 100%). The default value is 50, which indicates to clip 0.5 of the black pixels. "whiteClip": (Optional) value that represents the percentage of white pixels to clip from the image, in hundredths of a percent. Range from 0 to 10000 (which represents 100%). The default value is 50, which indicates to clip 0.5 of the white pixels. |
ImageProcessingCompletedEventArgs.Results |
"master": Object containing color-leveling information for the Master channel. Members are: minInput, maxInput, minOutput, maxOutput, and gamma. "red": Object containing color-leveling information for the Red channel. Members are: minInput, maxInput, minOutput, maxOutput, and gamma. "green": Object containing color-leveling information for the Green channel. Members are: minInput, maxInput, minOutput, maxOutput, and gamma. "blue": Object containing color-leveling information for the Blue channel. Members are: minInput, maxInput, minOutput, maxOutput, and gamma. |
Example: Apply the AutoColorLevel command to the canvas.
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();
Applies color-leveling to an image. It changes the image shadows, midtones and highlights. Command parameters:
Member | Values |
---|---|
ImageProcessing.Command |
"ColorLevel" |
ImageProcessing.Arguments |
"flag": Flag that indicates the channel being leveled. 1 for Red Channel, and/or 16 for Green Channel, and/or 256 for Blue Channel, and/or 4096 for Master Channel, or 4369 for All "masterChannelColorLevelData": Color-leveling information Object for the master channel used in the ColorLevel Command. Members are: minInput, maxInput, minOutput, maxOutput, and gamma. (min/max Input-Output values: 0 - 255, gamma values: 1 to infinity) "redChannelColorLevelData": Color-leveling information Object for the red channel used in the ColorLevel Command. Members are: minInput, maxInput, minOutput, maxOutput, and gamma. (min/max Input-Output values: 0 - 255, gamma values: 1 to infinity) "greenChannelColorLevelData": Color-leveling information Object for the green channel used in the ColorLevel Command. Members are: minInput, maxInput, minOutput, maxOutput, and gamma. (min/max Input-Output values: 0 - 255, gamma values: 1 to infinity) "blueChannelColorLevelData": Color-leveling information Object for the blue channel used in the ColorLevel Command. Members are: minInput, maxInput, minOutput, maxOutput, and gamma. (min/max Input-Output values: 0 - 255, gamma values: 1 to infinity) |
ImageProcessingCompletedEventArgs.Results |
Not used |
Example: Apply the ColorLevel command to the canvas.
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();
Changes the Contrast/Brightness/Intensity values of the image. Command parameters:
Member | Values |
---|---|
ImageProcessing.Command |
"ContrastBrightnessIntensity" |
ImageProcessing.Arguments |
"contrast": The value representing contrast. Values range from -1000 to 1000 "brightness": The value representing brightness. Values range from -1000 to 1000 "intensity": The value representing intensity. Values range from -1000 to 1000 |
ImageProcessingCompletedEventArgs.Results |
Not used |
Example: Change the Contrast/Brightness/Intensity values of the canvas.
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();
Changes the Hue/Saturation/Intensity values of the image. Command parameters:
Member | Values |
---|---|
ImageProcessing.Command |
"ChangeHueSaturationIntensity" |
ImageProcessing.Arguments |
"hue": The hue value. Values range from-18000 to 18000 "saturation": The saturation value. Values range from -1000 to 1000 "intensity": The intensity value. Values range from -1000 to 1000 "hsiData": (Optional) array of Objects that provides information about the color ranges. Object Members: hue (-18000 to 18000), saturation (-1000 to 1000), intensity(-1000 to 1000), innerLow (-359 to 359), innerHigh (-359 to 359), outerLow (-359 to 359), and outerHigh (-359 to 359) |
ImageProcessingCompletedEventArgs.Results |
Not used |
Example: Change the Hue/Saturation/Intensity values of the canvas.
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();
This file contains the following commands:
Smoothes or blurs an image by applying a Gaussian filter to the specified image. Command parameters:
Member | Values |
---|---|
ImageProcessing.Command |
"GaussianFilter" |
ImageProcessing.Arguments |
"radius": radius value. 1 to infinity. |
ImageProcessingCompletedEventArgs.Results |
Not used |
Example: Apply the GaussianFilter command to the canvas.
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();
Sharpens the image by applying the unsharp mask. Command parameters:
Member | Values |
---|---|
ImageProcessing.Command |
"UnsharpMask" |
ImageProcessing.Arguments |
"radius": The radius value. Values range from 1 to infinity. "amount": The amount value. Values range from 0 to infinity. "threshold": The threshold value. Values range from 0 to 255. "colorType": The colorType value. 1 for RGB, 2 for YUV |
ImageProcessingCompletedEventArgs.Results |
Not used |
Example: Apply the UnsharpMask command to the canvas.
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();
Smoothes the rough edges in the image. Command parameters:
Member | Values |
---|---|
ImageProcessing.Command |
"SmoothEdges" |
ImageProcessing.Arguments |
"amount": The amount value. Range is 0 to 100. "threshold": The threshold value. Range is 0 to 255. |
ImageProcessingCompletedEventArgs.Results |
Not used |
Example: Apply the SmoothEdges command to the canvas.
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();
Imposes a spatial filter on an image. Command parameters:
Member | Values | ||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|
ImageProcessing.Command |
"SpatialFilter" |
||||||||||
ImageProcessing.Arguments |
|
||||||||||
ImageProcessingCompletedEventArgs.Results |
"dimension": Matrix dimension value. |
Example: Apply the SpatialFilter command to the canvas.
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();
Applies an emboss effect to an image, letting you specify the depth and direction of the effect. Command parameters:
Member | Values |
---|---|
ImageProcessing.Command |
"Emboss" |
ImageProcessing.Arguments |
"direction": Integer that represents the direction of the apparent light source. 0 for North, 1 for NorthEast, 2 for East, 3 for SouthEast, 4 for South, 5 for SouthWest, 6 for West, 7 for NorthWest "depth": The depth value. Range is 0 to 1000. |
ImageProcessingCompletedEventArgs.Results |
Not used |
Example: Apply the the Emboss command to the canvas.
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();
Increases or decreases the sharpness of the specified image. Command parameters:
Member | Values |
---|---|
ImageProcessing.Command |
"Sharpen" |
ImageProcessing.Arguments |
"sharpness": The sharpness value. Values range from -1000 to 1000. |
ImageProcessingCompletedEventArgs.Results |
Not used |
Example: Apply the Sharpen command to the canvas.
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();
Imposes a binary filter on an image. Command parameters:
Member | Values |
---|---|
ImageProcessing.Command |
"BinaryFilter" |
ImageProcessing.Arguments |
"predefined": Integer that represents a predefined binary filter.
"maximum": A boolean value that indicates whether the filter is a maximum filter. "matrix": An array of filter coefficients. |
ImageProcessingCompletedEventArgs.Results |
"dimension": The dimension value for the matrix. |
Example: Apply the BinaryFilter command to the canvas.
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();
Increases or decreases the sharpness of the specified image. Command parameters:
Member | Values |
---|---|
ImageProcessing.Command |
"AntiAliasing" |
ImageProcessing.Arguments |
"threshold": A threshold value. Range is 0 to 255. "dimension": A dimension value. Range is 1 to infinity. "antiAliasingType": A value that indicates the type of anti-aliasing filter to use.
|
ImageProcessingCompletedEventArgs.Results |
Not used |
Example: Apply the AntiAliasing command to the canvas.
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();
Updates a range of entries in the lookup table, based on the specified mathematical function. Command parameters:
Member | Values |
---|---|
ImageProcessing.Command |
"GetFunctionalLookupTable" |
ImageProcessing.Arguments |
"lookupTable": The initial lookup table array. The user must set the first and the last element of the lookup table manually. "start": The index of the first entry in the lookup table to update. "end": The index of the last entry in the lookup table to update. "factor": A Value that indicates the factor to be applied in the function operation specified in the flags parameter. "flags": A flag that indicates the function used to update the lookup table. 0 for Exponential, 1 for Logarithm, 2 for Linear, 3 for Sigmoid. |
ImageProcessingCompletedEventArgs.Results |
"lookupTable": The updated lookup table array. |
Example: Apply the GetFunctionalLookupTable command to a lookup table array.
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();
Erodes dark objects by the specified amount. Command parameters:
Member | Values |
---|---|
ImageProcessing.Command |
"MaxFilter" |
ImageProcessing.Arguments |
"dimension": A dimension value. Values range from 1 to infinity. |
ImageProcessingCompletedEventArgs.Results |
Not used |
Example: Apply the MaxFilter command to the canvas.
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();
Dilates dark objects by the specified amount. Command parameters:
Member | Values |
---|---|
ImageProcessing.Command |
"MinFilter" |
ImageProcessing.Arguments |
"dimension": A dimension value. Values range from 1 to infinity. |
ImageProcessingCompletedEventArgs.Results |
Not used |
Example: Apply the MinFilter command to the canvas.
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();
Removes speckles from an image. Typically, this command is used to clean up scanned images (such as FAX images). Command parameters:
Member | Values |
---|---|
ImageProcessing.Command |
"Despeckle" |
ImageProcessing.Arguments |
Not used |
ImageProcessingCompletedEventArgs.Results |
Not used |
Example: Apply the Despeckle command to the canvas.
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();
Applies different kinds of algorithms on images to resize them into the desired size. Command parameters:
Member | Values |
---|---|
ImageProcessing.Command |
"ResizeInterpolate" |
ImageProcessing.Arguments |
"width": The new Image width. "height": The new Image height. "type": An integer that represents the algorithm type used in resizing the image. 5 for Triangle, 6 for Hermite, 7 for Bell, 8 for QuadraticBSpline, 9 for CubicBSpline, 10 for BoxFilter, 11 for Lanczos, 12 for Michell, 13 for Cosine, 14 for Catrom, 15 for Quadratic, 16 for CubicConvolution, 17 for Bilinear = 17, 18 for Bresenham |
ImageProcessingCompletedEventArgs.Results |
"resultImage": The new Image after resizing. Members are: width(new Image width), height(new Image height), and data(new Image pixel data) |
Example: Apply the ResizeInterpolate command to the canvas.
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();