Client-side Image Processing with HTML5 and JavaScript

When LEAD Technologies set out to create its HTML5 SDK, we wanted to do it right by making LEADTOOLS the fastest and most interactive toolkit available. Thanks to our many customers investing in and developing with this technology, we take that as a vote of confidence that we have succeeded in attaining that goal.

There are many ways to design a zero footprint application, and unfortunately the performance and quality often suffer due to many applications simply pushing all of the image processing to a server. With the LEADTOOLS JavaScript libraries, you can gain all the advantages of zero footprint development without losing the user-friendliness of an application that can provide instantaneous visual feedback.

Not only is LEADTOOLS incredibly fast in performing its client-side image processing routines, its JavaScript libraries greatly reduce the work load involved when developing your application. For example, it only takes a few lines of code to initialize the viewer and image processing engine:

function InitializeComponents() {
    // Setup the Viewer
    _imageViewer = new Leadtools.Controls.ImageViewer(new Leadtools.Controls.ImageViewerCreateOptions("myLeadImageViewer", "myLeadImageViewerControlID"));
    _imageViewer.set_imageUrl("Content/cannon.jpg");

    // Set size mode and initialize image processing after image loaded
    _imageViewer.add_imageChanged(function () {
        _imageViewer.set_sizeMode(Leadtools.Controls.ImageViewerSizeMode.fitWidth);
        InitImageProcessing();
    });

    _imageViewer.set_defaultInteractiveMode(new Leadtools.Controls.ImageViewerPanZoomInteractiveMode);
}

function InitImageProcessing() {
    var myCanvas = _imageViewer.get_backCanvas();
    var context = myCanvas.getContext("2d");

    _imageProcessing = new Leadtools.ImageProcessing();   

    _imageProcessing.add_completed(function (sender, e) {
        context.putImageData(e.get_imageData(), 0, 0);
        _imageViewer.invalidate();
    });
}

After that, you can execute any of the numerous image processing algorithms from our ever growing libraries by setting the parameters and calling run. The highly optimized image processing routines found in LEADTOOLS take advantage of JavaScript Web Workers if available to execute in a separate thread for maximum speed and optimal user experience.

function SetIPParams(filterName, ctx, canvas) {
    var myCanvas = _imageViewer.get_backCanvas();
    var ctx = myCanvas.getContext("2d");

    _imageProcessing.set_jsFilePath("Scripts/Leadtools.ImageProcessing.Effects.js");
    _imageProcessing.set_command(filterName);
    _imageProcessing.set_imageData(ctx.getImageData(0, 0, myCanvas.width, myCanvas.height));
    return _imageProcessing;
}

function SharpenFilter() {
    var imageProcessing = SetIPParams("Sharpen");
    imageProcessing.get_arguments()["sharpness"] = 750;
    imageProcessing.get_arguments()["threshold"] = 0;

    imageProcessing.run();
}

function GaussianFilter() {
    var imageProcessing = SetIPParams("GaussianFilter");
    imageProcessing.get_arguments()["radius"] = 10;

    imageProcessing.run();
}

There you have it. Adding fast, powerful client-side image processing to your HTML5 / JavaScript application could hardly be any easier. To download and run the full example, check out this forum post by one of our support agents.