LEADTOOLS Support
Imaging
Imaging SDK Questions
HTML5 ImageViewer Magnifying Glass, Contrast, Brightness and Hue
#1
Posted
:
Wednesday, May 24, 2017 10:25:13 AM(UTC)
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)
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.htmlSpecifically, for the Hue Saturation and Lightness, you can use the ChangeHueSaturationIntensity command:
![UserPostedImage](https://www.leadtools.com/support/publicforumimages/changehuesaturationintensity.png)
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](https://www.leadtools.com/support/publicforumimages/contrastbrightnessintensity.png)
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.
![LEAD Logo LEAD Logo](https://www.leadtools.com/images/new-site-images/leadtools-logo-header.png)
#3
Posted
:
Monday, May 29, 2017 8:54:11 AM(UTC)
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)
Groups: Manager, Tech Support, Administrators
Posts: 218
Was thanked: 12 time(s) in 12 post(s)
LEADTOOLS Support
Imaging
Imaging SDK Questions
HTML5 ImageViewer Magnifying Glass, Contrast, Brightness and Hue
You cannot post new topics in this forum.
You cannot reply to topics in this forum.
You cannot delete your posts in this forum.
You cannot edit your posts in this forum.
You cannot create polls in this forum.
You cannot vote in polls in this forum.