LEADTOOLS JavaScript Image Processing

Show in webframe

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:

Leadtools.ImageProcessing.Main.js

This file contains the following commands:

Flip

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.set_jsFilePath("Scripts/Leadtools.ImageProcessing.Main.js");
             imageProcessing.set_command("Flip");
             imageProcessing.set_imageData(context.getImageData(0, 0, myCanvas.width, myCanvas.height));
             imageProcessing.add_completed(function(sender, e) {
                context.putImageData(e.get_imageData(), 0, 0);
             });
             imageProcessing.run();

Reverse

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.set_jsFilePath("Scripts/Leadtools.ImageProcessing.Main.js");
             imageProcessing.set_command("Reverse");
             imageProcessing.set_imageData(context.getImageData(0, 0, myCanvas.width, myCanvas.height));
             imageProcessing.add_completed(function(sender, e) {
                context.putImageData(e.get_imageData(), 0, 0);
             });
             imageProcessing.run();

Fill

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 blue 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.set_jsFilePath("Scripts/Leadtools.ImageProcessing.Main.js");
             imageProcessing.set_command("Fill");
             imageProcessing.get_arguments()["color"] = 0xFF0000FF;
             imageProcessing.set_imageData(context.getImageData(0, 0, myCanvas.width, myCanvas.height));
             imageProcessing.add_completed(function(sender, e) {
                context.putImageData(e.get_imageData(), 0, 0);
             });
             imageProcessing.run();

Leadtools.ImageProcessing.Color.js

This file contains the following commands:

Invert

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.set_jsFilePath("Scripts/Leadtools.ImageProcessing.Color.js");
             imageProcessing.set_command("Invert");
             imageProcessing.set_imageData(context.getImageData(0, 0, myCanvas.width, myCanvas.height));
             imageProcessing.add_completed(function(sender, e) {
                context.putImageData(e.get_imageData(), 0, 0);
             });
             imageProcessing.run();

ColorCount

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.set_jsFilePath("Scripts/Leadtools.ImageProcessing.Color.js");
             imageProcessing.set_command("ColorCount");
             imageProcessing.set_imageData(context.getImageData(0, 0, myCanvas.width, myCanvas.height));
             imageProcessing.add_completed(function(sender, e) {
                var count = e.get_results()["colorCount"];
                alert("The canvas contains " + count + " unique color(s)");
             });
             imageProcessing.run();

StretchHistogram

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.set_jsFilePath("Scripts/Leadtools.ImageProcessing.Color.js");
             imageProcessing.set_command("StretchHistogram");
             imageProcessing.set_imageData(context.getImageData(0, 0, myCanvas.width, myCanvas.height));
             imageProcessing.add_completed(function(sender, e) {
                context.putImageData(e.get_imageData(), 0, 0);
             });
             imageProcessing.run();

AdaptiveContrast

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: Performs adaptive contrast enhancement (ACE) on the canvas.


             var myCanvas = document.getElementById("myCanvas");
             var context = myCanvas.getContext("2d");
             var imageProcessing = new lt.ImageProcessing();
             imageProcessing.set_jsFilePath("Scripts/Leadtools.ImageProcessing.Color.js");
             imageProcessing.set_command("AdaptiveContrast");
             imageProcessing.get_arguments()["dimension"] = 3;
             imageProcessing.get_arguments()["amount"] = 500;
             imageProcessing.get_arguments()["type"] = 1;
             imageProcessing.set_imageData(context.getImageData(0, 0, myCanvas.width, myCanvas.height));
             imageProcessing.add_completed(function(sender, e) {
               context.putImageData(e.get_imageData(), 0, 0);
             });
             imageProcessing.run();

HistogramEqualize

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 typ indicates which color space to equalize. 1 for Rgb, 2 for Yuv, or 4 for Gray
ImageProcessingCompletedEventArgs.Results

Not used

Example: Apply HistogramEqualize command to the canvas.


             var myCanvas = document.getElementById("myCanvas");
             var context = myCanvas.getContext("2d");
             var imageProcessing = new lt.ImageProcessing();
             imageProcessing.set_jsFilePath("Scripts/Leadtools.ImageProcessing.Color.js");
             imageProcessing.set_command("HistogramEqualize");
             imageProcessing.get_arguments()["type"] = 1;
             imageProcessing.set_imageData(context.getImageData(0, 0, myCanvas.width, myCanvas.height));
             imageProcessing.add_completed(function(sender, e) {
               context.putImageData(e.get_imageData(), 0, 0);
             });
             imageProcessing.run();

GammaCorrect

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 GammaCorrect command to the canvas.


             var myCanvas = document.getElementById("myCanvas");
             var context = myCanvas.getContext("2d");
             var imageProcessing = new lt.ImageProcessing();
             imageProcessing.set_jsFilePath("Scripts/Leadtools.ImageProcessing.Color.js");
             imageProcessing.set_command("GammaCorrect");
             imageProcessing.get_arguments()["gamma"] = 1000;
             imageProcessing.set_imageData(context.getImageData(0, 0, myCanvas.width, myCanvas.height));
             imageProcessing.add_completed(function(sender, e) {
               context.putImageData(e.get_imageData(), 0, 0);
             });
             imageProcessing.run();

AutoColorLevel

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 AutoColorLevel command to the canvas.


             var myCanvas = document.getElementById("myCanvas");
             var context = myCanvas.getContext("2d");
             var imageProcessing = new lt.ImageProcessing();
             imageProcessing.set_jsFilePath("Scripts/Leadtools.ImageProcessing.Color.js");
             imageProcessing.set_command("AutoColorLevel");
             imageProcessing.get_arguments()["type"] = 3;
             imageProcessing.get_arguments()["flag"] = 0;
             imageProcessing.get_arguments()["blackClip"] = 1000;
             imageProcessing.get_arguments()["whiteClip"] = 1000;
             imageProcessing.set_imageData(context.getImageData(0, 0, myCanvas.width, myCanvas.height));
             imageProcessing.add_completed(function(sender, e) {
               context.putImageData(e.get_imageData(), 0, 0);
               var master = e.get_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();

ColorLevel

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 ColorLevel command to the canvas.


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

ContrastBrightnessIntensity

Changes the Contrast/Brightness/Intensity values of the image. Command parameters:

Member Values
ImageProcessing.Command

"ContrastBrightnessIntensity"
ImageProcessing.Arguments

"contrast": The value representing contrast. Range is -1000 to 1000

"brightness": The value representing brightness. Range is -1000 to 1000

"intensity": The value representing intensity. Range is -1000 to 1000
ImageProcessingCompletedEventArgs.Results

Not used

Example: Changes the Contrast/Brightness/Intensity values of the canvas.


             var myCanvas = document.getElementById("myCanvas");
             var context = myCanvas.getContext("2d");
             var imageProcessing = new lt.ImageProcessing();
             imageProcessing.set_jsFilePath("Scripts/Leadtools.ImageProcessing.Color.js");
             imageProcessing.set_command("ContrastBrightnessIntensity");
             imageProcessing.get_arguments()["contrast"] = 500;
             imageProcessing.get_arguments()["brightness"] = 500;
             imageProcessing.get_arguments()["intensity"] = 500;
             imageProcessing.set_imageData(context.getImageData(0, 0, myCanvas.width, myCanvas.height));
             imageProcessing.add_completed(function(sender, e) {
               context.putImageData(e.get_imageData(), 0, 0);
             });
             imageProcessing.run();

ChangeHueSaturationIntensity

Changes the Hue/Saturation/Intensity values of the image. Command parameters:

Member Values
ImageProcessing.Command

"ChangeHueSaturationIntensity"
ImageProcessing.Arguments

"hue": The hue value. Range is -18000 to 18000

"saturation": The saturation value. Range is -1000 to 1000

"intensity": The intensity value. Range is -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: Changes the Hue/Saturation/Intensity values of the canvas.


             var myCanvas = document.getElementById("myCanvas");
             var context = myCanvas.getContext("2d");
             var imageProcessing = new lt.ImageProcessing();
             imageProcessing.set_jsFilePath("Scripts/Leadtools.ImageProcessing.Color.js");
             imageProcessing.set_command("ChangeHueSaturationIntensity");
             imageProcessing.get_arguments()["hue"] = 500;
             imageProcessing.get_arguments()["saturation"] = 500;
             imageProcessing.get_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.get_arguments()["hsiData"] = hsiData;
             imageProcessing.set_imageData(context.getImageData(0, 0, myCanvas.width, myCanvas.height));
             imageProcessing.add_completed(function(sender, e) {
               context.putImageData(e.get_imageData(), 0, 0);
             });
             imageProcessing.run();

Leadtools.ImageProcessing.Effects.js

This file contains the following commands:

GaussianFilter

Smooths 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 GaussianFilter command to the canvas.


             var myCanvas = document.getElementById("myCanvas");
             var context = myCanvas.getContext("2d");
             var imageProcessing = new lt.ImageProcessing();
             imageProcessing.set_jsFilePath("Scripts/Leadtools.ImageProcessing.Effects.js");
             imageProcessing.set_command("GaussianFilter");
             imageProcessing.get_arguments()["radius"] = 10;
             imageProcessing.set_imageData(context.getImageData(0, 0, myCanvas.width, myCanvas.height));
             imageProcessing.add_completed(function(sender, e) {
               context.putImageData(e.get_imageData(), 0, 0);
             });
             imageProcessing.run();

UnsharpMask

Sharpens the image by applying the unsharp mask. Command parameters:

Member Values
ImageProcessing.Command

"UnsharpMask"
ImageProcessing.Arguments

"radius": The radius value. Range is 1 to infinity.

"amount": The amount value. Range is 0 to infinity.

"threshold": The threshold value. Range is 0 to 255.

"colorType": The colorType value. 1 for Rgb, 2 for Yuv
ImageProcessingCompletedEventArgs.Results

Not used

Example: Apply UnsharpMask command to the canvas.


             var myCanvas = document.getElementById("myCanvas");
             var context = myCanvas.getContext("2d");
             var imageProcessing = new lt.ImageProcessing();
             imageProcessing.set_jsFilePath("Scripts/Leadtools.ImageProcessing.Effects.js");
             imageProcessing.set_command("UnsharpMask");
             imageProcessing.get_arguments()["radius"] = 3;
             imageProcessing.get_arguments()["amount"] = 1000;
             imageProcessing.get_arguments()["threshold"] = 128;
             imageProcessing.get_arguments()["colorType"] = 2;
             imageProcessing.set_imageData(context.getImageData(0, 0, myCanvas.width, myCanvas.height));
             imageProcessing.add_completed(function(sender, e) {
               context.putImageData(e.get_imageData(), 0, 0);
             });
             imageProcessing.run();

SmoothEdges

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 SmoothEdges command to the canvas.


             var myCanvas = document.getElementById("myCanvas");
             var context = myCanvas.getContext("2d");
             var imageProcessing = new lt.ImageProcessing();
             imageProcessing.set_jsFilePath("Scripts/Leadtools.ImageProcessing.Effects.js");
             imageProcessing.set_command("SmoothEdges");
             imageProcessing.get_arguments()["amount"] = 50;
             imageProcessing.get_arguments()["threshold"] = 10;
             imageProcessing.set_imageData(context.getImageData(0, 0, myCanvas.width, myCanvas.height));
             imageProcessing.add_completed(function(sender, e) {
               context.putImageData(e.get_imageData(), 0, 0);
             });
             imageProcessing.run();

SpatialFilter

Imposes a spatial filter on an image. Command parameters:

Member Values
ImageProcessing.Command

"SpatialFilter"
ImageProcessing.Arguments
Flag Name Values
"predefined" Integer represents a predefined spatial filter.
  • 0 for EmbossNorth
  • 1 for EmbossNorthEast
  • 2 forEmbossEast
  • 3 for EmbossSouthEast
  • 4 for EmbossSouth
  • 5 for EmbossSouthWest
  • 6 for EmbossWest
  • 7 for EmbossNorthWest
  • 8 for GradientEdgeEnhancementNorth
  • 9 for GradientEdgeEnhancementNorthEast
  • 10 for GradientEdgeEnhancementEast
  • 11 for GradientEdgeEnhancementSouthEast
  • 12 for GradientEdgeEnhancementSouth
  • 13 for GradientEdgeEnhancementSouthWest
  • 14 for GradientEdgeEnhancementWest
  • 15 for GradientEdgeEnhancementNorthWest
  • 16 for LaplacianFilter1
  • 17 for LaplacianFilter2
  • 18 for LaplacianFilter3
  • 19 for LaplacianDiagonal
  • 20 for LaplacianHorizontal
  • 21 for LaplacianVertical
  • 22 for SobelHorizontal
  • 23 for SobelVertical
  • 24 for PrewittHorizontal
  • 25 for PrewittVertical
  • 26 for ShiftAndDifferenceDiagonal
  • 27 for ShiftAndDifferenceHorizontal
  • 28 for ShiftAndDifferenceVertical
  • 29 for LineSegmentHorizontal
  • 30 for LineSegmentVertical
  • 31 for LineSegmentLeftToRight
  • 32 for LineSegmentRightToLeft
"divisor" Divisor value. Range is from minus infinity to infinity, except 0.
"bias" Bias value. Range is from minus infinity to infinity.
"matrix" Array of weight factors.
ImageProcessingCompletedEventArgs.Results

"dimension": Matrix dimension value.

Example: Apply SpatialFilter command to the canvas.


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

Emboss

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 represent 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 Emboss command to the canvas.


             var myCanvas = document.getElementById("myCanvas");
             var context = myCanvas.getContext("2d");
             var imageProcessing = new lt.ImageProcessing();
             imageProcessing.set_jsFilePath("Scripts/Leadtools.ImageProcessing.Effects.js");
             imageProcessing.set_command("Emboss");
             imageProcessing.get_arguments()["direction"] = 5;
             imageProcessing.get_arguments()["depth"] = 500;
             imageProcessing.set_imageData(context.getImageData(0, 0, myCanvas.width, myCanvas.height));
             imageProcessing.add_completed(function(sender, e) {
               context.putImageData(e.get_imageData(), 0, 0);
             });
             imageProcessing.run();

Sharpen

Increases or decreases the sharpness of a specific image. Command parameters:

Member Values
ImageProcessing.Command

"Sharpen"
ImageProcessing.Arguments

"sharpness": The sharpness value. Range is -1000 to 1000.
ImageProcessingCompletedEventArgs.Results

Not used

Example: Apply Sharpen command to the canvas.


             var myCanvas = document.getElementById("myCanvas");
             var context = myCanvas.getContext("2d");
             var imageProcessing = new lt.ImageProcessing();
             imageProcessing.set_jsFilePath("Scripts/Leadtools.ImageProcessing.Effects.js");
             imageProcessing.set_command("Sharpen");
             imageProcessing.get_arguments()["sharpness"] = 5;
             imageProcessing.set_imageData(context.getImageData(0, 0, myCanvas.width, myCanvas.height));
             imageProcessing.add_completed(function(sender, e) {
               context.putImageData(e.get_imageData(), 0, 0);
             });
             imageProcessing.run();

BinaryFilter

Imposes a binary filter on an image. Command parameters:

Member Values
ImageProcessing.Command

"BinaryFilter"
ImageProcessing.Arguments

"predefined": Integer that represents a predefined binary filter.

  • 0 for ErosionOmniDirectional
  • 1 for ErosionHorizontal
  • 2 for ErosionVertical
  • 3 for ErosionDiagonal
  • 4 for DilationOmniDirectional
  • 5 for DilationHorizontal
  • 6 for DilationVertical
  • 7 for DilationDiagonal

"maximum": A boolean to indicate whether the filter is maximum or not.

"matrix": An array of filter coefficients.
ImageProcessingCompletedEventArgs.Results

"dimension": The matrix dimension value.

Example: Apply BinaryFilter command to the canvas.


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

AntiAliasing

Increases or decreases the sharpness of a specific 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.

  • 0 for Type1
  • 1 for Type2
  • 2 for Type3
  • 3 for Diagonal
  • 4 for Horizontal
  • 5 for Vertical
ImageProcessingCompletedEventArgs.Results

Not used

Example: Apply AntiAliasing command to the canvas.


             var myCanvas = document.getElementById("myCanvas");
             var context = myCanvas.getContext("2d");
             var imageProcessing = new lt.ImageProcessing();
             imageProcessing.set_jsFilePath("Scripts/Leadtools.ImageProcessing.Effects.js");
             imageProcessing.set_command("AntiAliasing");
             imageProcessing.get_arguments()["threshold"] = 10;
             imageProcessing.get_arguments()["dimension"] = 3;
             imageProcessing.get_arguments()["antiAliasingType"] = 1;
             imageProcessing.set_imageData(context.getImageData(0, 0, myCanvas.width, myCanvas.height));
             imageProcessing.add_completed(function(sender, e) {
               context.putImageData(e.get_imageData(), 0, 0);
             });
             imageProcessing.run();

GetFunctionalLookupTable

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 GetFunctionalLookupTable command to lookup table array.


             var imageProcessing = new lt.ImageProcessing();
             imageProcessing.set_jsFilePath("Scripts/Leadtools.ImageProcessing.Effects.js");
             imageProcessing.set_command("GetFunctionalLookupTable");
             imageProcessing.get_arguments()["threshold"] = 10;
             imageProcessing.get_arguments()["dimension"] = 3;
             imageProcessing.get_arguments()["antiAliasingType"] = 1;
             imageProcessing.add_completed(function(sender, e) {
                var new lookupTable = e.get_results().lookupTable;
             });
             imageProcessing.run();

Leadtools.ImageProcessing.Core.js

MaxFilter

Erodes dark objects by the specified amount. Command parameters:

Member Values
ImageProcessing.Command

"MaxFilter"
ImageProcessing.Arguments

"dimension": A dimension value. Range is 1 to infinity.
ImageProcessingCompletedEventArgs.Results

Not used

Example: Apply MaxFilter command to the canvas.


             var myCanvas = document.getElementById("myCanvas");
             var context = myCanvas.getContext("2d");
             var imageProcessing = new lt.ImageProcessing();
             imageProcessing.set_jsFilePath("Scripts/Leadtools.ImageProcessing.Core.js");
             imageProcessing.set_command("MaxFilter");
             imageProcessing.get_arguments()["dimension"] = 3;
             imageProcessing.set_imageData(context.getImageData(0, 0, myCanvas.width, myCanvas.height));
             imageProcessing.add_completed(function(sender, e) {
               context.putImageData(e.get_imageData(), 0, 0);
             });
             imageProcessing.run();

MinFilter

Dilates dark objects by the specified amount. Command parameters:

Member Values
ImageProcessing.Command

"MinFilter"
ImageProcessing.Arguments

"dimension": A dimension value. Range is 1 to infinity.
ImageProcessingCompletedEventArgs.Results

Not used

Example: Apply MinFilter command to the canvas.


             var myCanvas = document.getElementById("myCanvas");
             var context = myCanvas.getContext("2d");
             var imageProcessing = new lt.ImageProcessing();
             imageProcessing.set_jsFilePath("Scripts/Leadtools.ImageProcessing.Core.js");
             imageProcessing.set_command("MinFilter");
             imageProcessing.get_arguments()["dimension"] = 3;
             imageProcessing.set_imageData(context.getImageData(0, 0, myCanvas.width, myCanvas.height));
             imageProcessing.add_completed(function(sender, e) {
               context.putImageData(e.get_imageData(), 0, 0);
             });
             imageProcessing.run();

Despeckle

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 Despeckle command to the canvas.


             var myCanvas = document.getElementById("myCanvas");
             var context = myCanvas.getContext("2d");
             var imageProcessing = new lt.ImageProcessing();
             imageProcessing.set_jsFilePath("Scripts/Leadtools.ImageProcessing.Core.js");
             imageProcessing.set_command("Despeckle");
             imageProcessing.set_imageData(context.getImageData(0, 0, myCanvas.width, myCanvas.height));
             imageProcessing.add_completed(function(sender, e) {
               context.putImageData(e.get_imageData(), 0, 0);
             });
             imageProcessing.run();

ResizeInterpolate

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 resize. Members are: width(new Image width), height(new Image height), and data(new Image pixel data)

Example: Apply ResizeInterpolate command to the canvas.


             var myCanvas = document.getElementById("myCanvas");
             var context = myCanvas.getContext("2d");
             var imageProcessing = new lt.ImageProcessing();
             imageProcessing.set_jsFilePath("Scripts/Leadtools.ImageProcessing.Core.js");
             imageProcessing.set_command("ResizeInterpolate");
             imageProcessing.get_arguments()["width"] = 1024;
             imageProcessing.get_arguments()["height"] = 1024;
             imageProcessing.get_arguments()["type"] = 17;//Bilinear
             imageProcessing.set_imageData(context.getImageData(0, 0, myCanvas.width, myCanvas.height));
             imageProcessing.add_completed(function(sender, e) {
               var resultImage = e.get_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();

Leadtools.ImageProcessing.Effects.js

This file contain the following commands:

GaussianFilter

Smooths or blurs an image by applying a Gaussian filter to the specified image. Command parameters:

Member Values
ImageProcessing.Command

"GaussianFilter"
ImageProcessing.Arguments

"radius": The radius value. Range is 1 to infinity.
ImageProcessingCompletedEventArgs.Results

Not used

Example: Apply GaussianFilter command to the canvas.


             var myCanvas = document.getElementById("myCanvas");
             var context = myCanvas.getContext("2d");
             var imageProcessing = new lt.ImageProcessing();
             imageProcessing.set_jsFilePath("Scripts/Leadtools.ImageProcessing.Effects.js");
             imageProcessing.set_command("GaussianFilter");
             imageProcessing.get_arguments()["radius"] = 10;
             imageProcessing.set_imageData(context.getImageData(0, 0, myCanvas.width, myCanvas.height));
             imageProcessing.add_completed(function(sender, e) {
               context.putImageData(e.get_imageData(), 0, 0);
             });
             imageProcessing.run();

UnsharpMask

Sharpens the image by applying the unsharp mask. Command parameters:

Member Values
ImageProcessing.Command

"UnsharpMask"
ImageProcessing.Arguments

"radius": The radius value. Range is 1 to infinity.

"amount": The amount value. Range is 0 to infinity.

"threshold": The threshold value. Range is 0 to 255.

"colorType": The colorType value. 1 for Rgb, 2 for Yuv
ImageProcessingCompletedEventArgs.Results

Not used

Example: Apply UnsharpMask command to the canvas.


             var myCanvas = document.getElementById("myCanvas");
             var context = myCanvas.getContext("2d");
             var imageProcessing = new lt.ImageProcessing();
             imageProcessing.set_jsFilePath("Scripts/Leadtools.ImageProcessing.Effects.js");
             imageProcessing.set_command("UnsharpMask");
             imageProcessing.get_arguments()["radius"] = 3;
             imageProcessing.get_arguments()["amount"] = 1000;
             imageProcessing.get_arguments()["threshold"] = 128;
             imageProcessing.get_arguments()["colorType"] = 2;
             imageProcessing.set_imageData(context.getImageData(0, 0, myCanvas.width, myCanvas.height));
             imageProcessing.add_completed(function(sender, e) {
               context.putImageData(e.get_imageData(), 0, 0);
             });
             imageProcessing.run();

SmoothEdges

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 SmoothEdges command to the canvas.


             var myCanvas = document.getElementById("myCanvas");
             var context = myCanvas.getContext("2d");
             var imageProcessing = new lt.ImageProcessing();
             imageProcessing.set_jsFilePath("Scripts/Leadtools.ImageProcessing.Effects.js");
             imageProcessing.set_command("SmoothEdges");
             imageProcessing.get_arguments()["amount"] = 50;
             imageProcessing.get_arguments()["threshold"] = 10;
             imageProcessing.set_imageData(context.getImageData(0, 0, myCanvas.width, myCanvas.height));
             imageProcessing.add_completed(function(sender, e) {
               context.putImageData(e.get_imageData(), 0, 0);
             });
             imageProcessing.run();

SpatialFilter

Imposes a spatial filter on an image. Command parameters:

Member Values
ImageProcessing.Command

"SpatialFilter"
ImageProcessing.Arguments

"predefined": An integer representing a predefined spatial filter.

"divisor": A divisor value. Range is minus infinity to infinity except 0.

"bias": A bias value. Range is minus infinity to infinity.

"matrix": An array of weight factors.
ImageProcessingCompletedEventArgs.Results

"dimension": A matrix dimension value.

Example: Apply SpatialFilter command to the canvas.


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

Emboss

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": An integer that represents the direction of the apparent light source.

"depth": A depth value. Range is 0 to 1000.
ImageProcessingCompletedEventArgs.Results

Not used

Example: Apply Emboss command to the canvas.


             var myCanvas = document.getElementById("myCanvas");
             var context = myCanvas.getContext("2d");
             var imageProcessing = new lt.ImageProcessing();
             imageProcessing.set_jsFilePath("Scripts/Leadtools.ImageProcessing.Effects.js");
             imageProcessing.set_command("Emboss");
             imageProcessing.get_arguments()["direction"] = 5;
             imageProcessing.get_arguments()["depth"] = 500;
             imageProcessing.set_imageData(context.getImageData(0, 0, myCanvas.width, myCanvas.height));
             imageProcessing.add_completed(function(sender, e) {
               context.putImageData(e.get_imageData(), 0, 0);
             });
             imageProcessing.run();

Sharpen

Increases or decreases the sharpness of a specific image. Command parameters:

Member Values
ImageProcessing.Command

"Sharpen"
ImageProcessing.Arguments

"sharpness": A depth value. Range is -1000 to 1000.
ImageProcessingCompletedEventArgs.Results

Not used

Example: Apply Sharpen command to the canvas.


             var myCanvas = document.getElementById("myCanvas");
             var context = myCanvas.getContext("2d");
             var imageProcessing = new lt.ImageProcessing();
             imageProcessing.set_jsFilePath("Scripts/Leadtools.ImageProcessing.Effects.js");
             imageProcessing.set_command("Sharpen");
             imageProcessing.get_arguments()["sharpness"] = 5;
             imageProcessing.set_imageData(context.getImageData(0, 0, myCanvas.width, myCanvas.height));
             imageProcessing.add_completed(function(sender, e) {
               context.putImageData(e.get_imageData(), 0, 0);
             });
             imageProcessing.run();

BinaryFilter

Imposes a binary filter on an image. Command parameters:

Member Values
ImageProcessing.Command

"BinaryFilter"
ImageProcessing.Arguments

"predefined": An integer representing a predefined spatial filter.

"maximum": A boolean that indicates whether the filter is maximum or not.

"matrix": An array of filter coefficients.
ImageProcessingCompletedEventArgs.Results

"dimension": A matrix dimension value.

Example: Apply BinaryFilter command to the canvas.


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

AntiAliasing

Increases or decreases the sharpness of a specific 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.

  • 0 for Type1
  • 1 for Type2
  • 2 for Type3
  • 3 for Diagonal
  • 4 for Horizontal
  • 5 for Vertical
ImageProcessingCompletedEventArgs.Results

Not used

Example: Apply AntiAliasing command to the canvas.


             var myCanvas = document.getElementById("myCanvas");
             var context = myCanvas.getContext("2d");
             var imageProcessing = new lt.ImageProcessing();
             imageProcessing.set_jsFilePath("Scripts/Leadtools.ImageProcessing.Effects.js");
             imageProcessing.set_command("AntiAliasing");
             imageProcessing.get_arguments()["threshold"] = 10;
             imageProcessing.get_arguments()["dimension"] = 3;
             imageProcessing.get_arguments()["antiAliasingType"] = 1;
             imageProcessing.set_imageData(context.getImageData(0, 0, myCanvas.width, myCanvas.height));
             imageProcessing.add_completed(function(sender, e) {
               context.putImageData(e.get_imageData(), 0, 0);
             });
             imageProcessing.run();

GetFunctionalLookupTable

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": Flags that indicate 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 GetFunctionalLookupTable command to lookup table array.


             var imageProcessing = new lt.ImageProcessing();
             imageProcessing.set_jsFilePath("Scripts/Leadtools.ImageProcessing.Effects.js");
             imageProcessing.set_command("GetFunctionalLookupTable");
             imageProcessing.get_arguments()["threshold"] = 10;
             imageProcessing.get_arguments()["dimension"] = 3;
             imageProcessing.get_arguments()["antiAliasingType"] = 1;
             imageProcessing.add_completed(function(sender, e) {
                var new lookupTable = e.get_results().lookupTable;
             });
             imageProcessing.run();