In This Topic ▼

LEADTOOLS JavaScript Image Processing

Summary

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:

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 green and 0xFF0000FF for blue and so on.
ImageProcessingCompletedEventArgs.Results	Not used

Example to fill a canvas with solid blue.

const myCanvas = document.getElementById("myCanvas"); 
const context = myCanvas.getContext("2d"); 
const 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();

Flip

Flips the image vertically. Command parameters:

Member	Values
ImageProcessing.Command	"Flip"
ImageProcessing.Arguments	Not used
ImageProcessingCompletedEventArgs.Results	Not used

Example to flip a canvas.

const myCanvas = document.getElementById("myCanvas"); 
const context = myCanvas.getContext("2d"); 
const 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();

Reverse

Flips the image horizontally. Command parameters:

Member	Values
ImageProcessing.Command	"Reverse"
ImageProcessing.Arguments	Not used
ImageProcessingCompletedEventArgs.Results	Not used

Example to reverse a canvas.

const myCanvas = document.getElementById("myCanvas"); 
const context = myCanvas.getContext("2d"); 
const 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();

Leadtools.ImageProcessing.Color.js

This file contains the following commands:

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

const myCanvas = document.getElementById("myCanvas"); 
const context = myCanvas.getContext("2d"); 
const 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();

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

const myCanvas = document.getElementById("myCanvas"); 
const context = myCanvas.getContext("2d"); 
const 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); 
  const 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();

ChangeHueSaturationIntensity

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 to change the Hue/Saturation/Intensity values of the canvas.

const myCanvas = document.getElementById("myCanvas"); 
const context = myCanvas.getContext("2d"); 
const 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; 
const 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();

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 to count the number of unique colors in a canvas.

const myCanvas = document.getElementById("myCanvas"); 
const context = myCanvas.getContext("2d"); 
const 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) { 
   const count = e.results["colorCount"]; 
   alert("The canvas contains " + count + " unique color(s)"); 
}); 
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 to apply the ColorLevel command to the canvas.

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

ContrastBrightnessIntensity

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 to change the Contrast/Brightness/Intensity values of the canvas.

const myCanvas = document.getElementById("myCanvas"); 
const context = myCanvas.getContext("2d"); 
const 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();

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

const myCanvas = document.getElementById("myCanvas"); 
const context = myCanvas.getContext("2d"); 
const 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();

Grayscale

Converts a 1-bit, 4-bit, 8-bit, 16-bit, 24-bit, or 32-bit image to an 8-bit, 12-bit, or 16-bit grayscale image.

Member	Values
ImageProcessing.Command	"Grayscale"
ImageProcessing.Arguments	"BitsPerPixel": The integer representing the Grayscale mode to use for conversion. The acceptable values are 8, 12, or 16 -bit grayscale image.
ImageProcessingCompletedEventArgs.Results	Not used

Example to apply the Grayscale command to the canvas.

const myCanvas = document.getElementById("myCanvas"); 
const context = myCanvas.getContext("2d"); 
const imageProcessing = new lt.ImageProcessing(); 
imageProcessing.jsFilePath = "Scripts/Leadtools.ImageProcessing.Color.js"; 
imageProcessing.command = "Grayscale"; 
imageProcessing.arguments["BitsPerPixel"] = 8; // Convert to 8-bit grayscale  
imageProcessing.imageData = context.getImageData(0, 0, myCanvas.width, myCanvas.height); 
imageProcessing.completed.add(function(sender, e) { 
  context.putImageData(e.imageData, 0, 0); 
}); 
imageProcessing.run();

HistogramEqualize

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

const myCanvas = document.getElementById("myCanvas"); 
const context = myCanvas.getContext("2d"); 
const 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();

Invert

Inverts the colors of the image. Command parameters:

Member	Values
ImageProcessing.Command	"Invert"
ImageProcessing.Arguments	Not used
ImageProcessingCompletedEventArgs.Results	Not used

Example to invert the colors of a canvas.

const myCanvas = document.getElementById("myCanvas"); 
const context = myCanvas.getContext("2d"); 
const 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();

StretchHistogram

Stretches the histogram of the image. Command parameters:

Member	Values
ImageProcessing.Command	"StretchHistogram"
ImageProcessing.Arguments	Not used
ImageProcessingCompletedEventArgs.Results	Not used

Example to stretch the histogram of the canvas.

const myCanvas = document.getElementById("myCanvas"); 
const context = myCanvas.getContext("2d"); 
const 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();

Leadtools.ImageProcessing.Effects.js

This file contains the following commands:

AntiAliasing

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.

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

Example to apply the AntiAliasing command to the canvas.

const myCanvas = document.getElementById("myCanvas"); 
const context = myCanvas.getContext("2d"); 
const 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();

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

const myCanvas = document.getElementById("myCanvas"); 
const context = myCanvas.getContext("2d"); 
const 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();

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

const myCanvas = document.getElementById("myCanvas"); 
const context = myCanvas.getContext("2d"); 
const 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();

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

const myCanvas = document.getElementById("myCanvas"); 
const context = myCanvas.getContext("2d"); 
const 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();

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

const 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) { 
   const new lookupTable = e.results.lookupTable; 
}); 
imageProcessing.run();

ImageProcessing.Arguments Flags

Flag Name	Values
"predefined"	Integer that 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.

Example to apply the SpatialFilter command to the canvas.

const myCanvas = document.getElementById("myCanvas"); 
const context = myCanvas.getContext("2d"); 
const 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();

Sharpen

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

const myCanvas = document.getElementById("myCanvas"); 
const context = myCanvas.getContext("2d"); 
const 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();

SpatialFilter

Imposes a spatial filter on an image. Command parameters:

Member	Values
ImageProcessing.Command	"SpatialFilter"
ImageProcessingCompletedEventArgs.Results	"dimension": Matrix dimension value.
ImageProcessing.Arguments	Refer to the "ImageProcessing.Arguments Flags" table below.

SmoothEdges

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

const myCanvas = document.getElementById("myCanvas"); 
const context = myCanvas.getContext("2d"); 
const 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();

UnsharpMask

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

const myCanvas = document.getElementById("myCanvas"); 
const context = myCanvas.getContext("2d"); 
const 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();

Leadtools.ImageProcessing.Core.js

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

const myCanvas = document.getElementById("myCanvas"); 
const context = myCanvas.getContext("2d"); 
const 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();

MaxFilter

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

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

MinFilter

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

const myCanvas = document.getElementById("myCanvas"); 
const context = myCanvas.getContext("2d"); 
const 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();

MultiscaleEnhancement

Enhances the contrast on an image, its edges, and the density range, in a way that all relevant image features are rendered with an appropriate level of visibility. This view mode is commonly used in Computed Radiography (CR).

Member	Values
ImageProcessing.Command	"Despeckle"
ImageProcessing.Arguments	Refer to the Arguments table below.
ImageProcessingCompletedEventArgs.Results	Not used

Member	Values
"contrast"	0, 2000, 10000
"edgeLevels"	1, 4, 9
"edgeCoefficient"	-1, 1, 2000
"latitudeLevels"	1, 5, 9
"latitudeCoefficient"	-1, 8, 2000
"flags"	None: 0x00000000 Edge Enhancement: 0x00000010 Latitude Reduction: 0x00000020
"type"	Gaussian: 0, Resample: 1, Bicubic:2, and Normal: 3

Example to apply the MultiscaleEnhancement command to the canvas.

const myCanvas = document.getElementById("myCanvas"); 
const context = myCanvas.getContext("2d"); 
const imageProcessing = new lt.ImageProcessing(); 
imageProcessing.jsFilePath = "Scripts/Leadtools.ImageProcessing.Core.js"; 
imageProcessing.command = "MultiscaleEnhancement"; 
 
imageProcessing.arguments["contrast"] = 2000; 
imageProcessing.arguments["edgeLevels"] = 4; 
imageProcessing.arguments["edgeCoefficient"] = -1; 
imageProcessing.arguments["latitudeLevels"] = 1; 
imageProcessing.arguments["latitudeCoefficient"] = -1; 
imageProcessing.arguments["flags"] = 0x00000000; // None: 0x00000000, Edge Enhancement 0x00000010, Latitude Reduction0x00000020 
imageProcessing.arguments["type"] = 0; // Gaussian: 0, Resample: 1, Bicubic:2, and Normal: 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();

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

Example to apply the ResizeInterpolate command to the canvas.

const myCanvas = document.getElementById("myCanvas"); 
const context = myCanvas.getContext("2d"); 
const 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) { 
  const resultImage = e.results.resultImage; 
  const canvas = document.createElement("canvas"); 
  canvas.width = resultImage.width; 
  canvas.height = resultImage.height; 
             
  const ctx = canvas.getContext("2d"); 
  const imgData = ctx.createImageData(canvas.width, canvas.height); 
  for (let 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); 
             
  const src = canvas1.toDataURL("image/png"); // now we get the new image in base64 form 
}); 
imageProcessing.run();

Leadtools.Controls.Medical.js

WindowLevel

Represents the data needed by the window level interactive mode for adjusting the window level of the image. Command parameters:

Member	Values
ImageProcessing.Command	"WindowLevel"
ImageProcessing.Arguments	"width", "center". Valid Range: 0-255
ImageProcessingCompletedEventArgs.Results	Not used

Example to apply the WindowLevel command to the canvas.

const myCanvas = document.getElementById("myCanvas"); 
const context = myCanvas.getContext("2d"); 
const imageProcessing = new lt.ImageProcessing(); 
imageProcessing.jsFilePath = "Scripts/Leadtools.Controls.Medical.js"; 
imageProcessing.command = "WindowLevel"; 
 
imageProcessing.arguments["width"] = 255; 
imageProcessing.arguments["center"] = 127; 
 
imageProcessing.imageData = context.getImageData(0, 0, myCanvas.width, myCanvas.height); 
imageProcessing.completed.add(function(sender, e) { 
  context.putImageData(e.imageData, 0, 0); 
}); 
imageProcessing.run();