HTML5 ImageViewer Magnifying Glass, Contrast, Brightness and Hue

#1 Posted : Wednesday, May 24, 2017 10:25:13 AM(UTC)

huey.hoague

Groups: Registered
Posts: 18

I am running into a bit of an issue trying to figure out what the syntax is to use the features on my MVC5 web app:

Adjust hue, saturation, and lightness
Adjust brightness and contrast
Magnifying Glass

#2 Posted : Thursday, May 25, 2017 9:31:02 AM(UTC)

Hadi

Groups: Manager, Tech Support, Administrators
Posts: 218

Was thanked: 12 time(s) in 12 post(s)

You can see all of the client-side commands that we have with the HTML5 ImageViewer at the following link:
https://www.leadtools.co...pt-image-processing.html

Specifically, for the Hue Saturation and Lightness, you can use the ChangeHueSaturationIntensity command:
UserPostedImage

Code:

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

For the Brightness and contrast you can use the ContrastBrightnessIntensity command:
UserPostedImage

Code:

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

Regarding the magnifying glass, you can use the ImageViewerMagnifyGlassInteractiveMode.

Code:

this._imageViewer.defaultInteractiveMode = new lt.Controls.ImageViewerMagnifyGlassInteractiveMode();

Please let me know if you have any further questions or issues regarding this!

Edited by user Thursday, January 21, 2021 10:15:22 AM(UTC) | Reason: Not specified

Hadi Chami
Developer Support Manager
LEAD Technologies, Inc.

#3 Posted : Monday, May 29, 2017 8:54:11 AM(UTC)

huey.hoague

Groups: Registered
Posts: 18

Can I get confirmation that these image processing commands are covered by the Pro suite SDK?

#4 Posted : Tuesday, May 30, 2017 8:44:17 AM(UTC)

Hadi

Groups: Manager, Tech Support, Administrators
Posts: 218

Was thanked: 12 time(s) in 12 post(s)

Yes, these are all unlocked and covered by the Image Pro Suite SDK

https://www.leadtools.com/sdk/pro-suite

Hadi Chami
Developer Support Manager
LEAD Technologies, Inc.

Notification

HTML5 ImageViewer Magnifying Glass, Contrast, Brightness and Hue - Magnifying Glass, Contrast, Brightness and Hue in HTML5


	Try the latest version of LEADTOOLS for free for 60 days by downloading the evaluation: https://www.leadtools.com/downloads Wanna join the discussion? Login to your LEADTOOLS Support account or Register a new forum account.