LEADTOOLS JavaScript Image Processing

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(); 
              

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(); 
              

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(); 
              

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(); 
              

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(); 
              

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(); 
              

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(); 
              

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(); 
              

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(); 
              

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(); 
              

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(); 
              

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(); 
              

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(); 
              

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(); 
              

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(); 
              

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(); 
              

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(); 
              

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(); 
              

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(); 
              

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(); 
              

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(); 
              

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(); 
              

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(); 
              

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(); 
              

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(); 
              

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();