HOW TO: Do Image Processing in JavaScript

#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.


	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.

Notification

HOW TO: Do Image Processing in JavaScript