Javascript: Image does not retain brightness changes after another transform

Options

View

Last

Unread

Previous Topic Next Topic

#1 Posted : Wednesday, January 18, 2017 1:52:10 PM(UTC)

Toadfish

Groups: Registered
Posts: 20

Hey all,

I'm looking at the following SDK Help page: https://www.leadtools.co...riptimageprocessing.html

And I'm looking at the following code sample:

Quote:

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

When I run this code, it changed the brightness of my image but the changes in brightness do not stay when I rotate, pan, or zoom the image.
Also, this code runs very slowly. It takes about 1 second for the image to change after a button click.

Any ideas on either problem?


	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.

#2 Posted : Thursday, January 19, 2017 11:10:05 AM(UTC)

Hadi

Groups: Manager, Tech Support, Administrators
Posts: 218

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

Hello,

Thank you for posting your question on the LEADTOOLS Technical Support Forum. The reason the image is reverting back to the original is because you are accessing the canvas element using the getElementById method:

Code:

var myCanvas = document.getElementById("myCanvas");

If you want to do concurrent image processing commands on the same image without it resetting, then you will need to access the canvas of the image viewer itself like so:

Code:

   var myCanvas = _imageViewer.canvas;

You can check out a project that implements this on this forum post:

https://www.leadtools.co...5-Image-Viewer#post42432

I also have attached the project to this post.

Please let me know if you have any further questions.

File Attachment(s):

ImageProcessingExample_19.zip (334kb) downloaded 165 time(s).

Hadi Chami
Developer Support Manager
LEAD Technologies, Inc.

#3 Posted : Thursday, January 19, 2017 1:03:42 PM(UTC)

Toadfish

Groups: Registered
Posts: 20

Ah hah. That worked! Thank you for the great example.

However, in IE11, this process takes anywhere between 10-20 seconds. I don't have the ability right now to test how well it would do in Edge.
In Chrome, it takes less than 1 second. Is there any setting that I can change that may be better optimized for IE?

#4 Posted : Thursday, January 19, 2017 2:10:50 PM(UTC)

Hadi

Groups: Manager, Tech Support, Administrators
Posts: 218

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

Unfortunately this is a limitation of Internet Explorer.

Since the processing is done on the client side, it is up to the browser on how fast it can do it. I tested it on IE11 and it did take a bit longer than Chrome (5s on IE vs 1s on Chrome) but Edge was just as fast as Chrome.

One thing you can try doing is disabling all internet explorer add-ons that are currently running. I was getting ~5s processing time before disabling my addons, but now i get maximum 3s. Also, running it in protected mode seems to make it faster as well, but I'm not sure what effects that would have.

UserPostedImage

Hadi Chami
Developer Support Manager
LEAD Technologies, Inc.

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.