Welcome Guest! To enable all features, please Login or Register.

Notification

Icon
Error

Options
View
Last Go to last post Unread Go to first unread post
#1 Posted : Thursday, July 27, 2017 4:22:21 PM(UTC)
Nick Villalobos

Groups: Registered
Posts: 119

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

Below you will find a simple code snippet of how you can incorporate Image Processing commands into your JavaScript application as well as an example project that you can download.

Here you can see the complete list of the JavaScript Image Processing commands:

The first thing you will need to do is set your autoCreateCanvas to true. This indicates whether to automatically create the HTML5 Canvas Element when the image is updated. Next, you'll want to add any processing functions that you created to your itemChanged event. All of this should be done on "window.onload" instead of a button click. If you try doing this on the outside of window.onload, it will not work because the image is not loaded by then.

Code:

//In the onload
imageViewer.autoCreateCanvas = true;
imageViewer.itemChanged.add(function (sender, e) { 
if(e.reason == lt.Controls.ImageViewerItemChangedReason.url){
//Invert the image on the load call
Invert(imageViewer);
}
});


Complete code to invert an image when being loaded
Code:

//In the onload
imageViewer.autoCreateCanvas = true;
imageViewer.itemChanged.add(function (sender, e) { 
if(e.reason == lt.Controls.ImageViewerItemChangedReason.url){
//Invert the image on the load call
Invert(imageViewer);
}
});

function Invert(imageViewer){
var myCanvas = imageViewer.canvas; 
var context = myCanvas.getContext("2d"); 
var imageProcessing = new lt.ImageProcessing(); 
imageProcessing.jsFilePath = "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); 
imageViewer.invalidate(lt.LeadRectD.empty);
}); 
imageProcessing.run(); 
}


File Attachment(s):
Image Viewer Example.zip (227kb) downloaded 213 time(s).

Edited by moderator Wednesday, November 18, 2020 8:27:52 AM(UTC)  | Reason: Not specified

Nick Villalobos
Developer Support Engineer
LEAD Technologies, Inc.

LEAD Logo
 

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 accountor Register a new forum account.

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.

Powered by YAF.NET | YAF.NET © 2003-2024, Yet Another Forum.NET
This page was generated in 0.058 seconds.