How to add image filters (photo effects) to images in the browser with JavaScript using Lena.js

The image filtering allows you to apply various effects on photos. Although JavaScript isn't suitable for Image manipulation at least for huge scale, it can be used with not so heavy images in the browser and in little projects.

In this article we'll show you how to add some image filters to images in the browser using the Lena.js library.

1. Download Lena.js

Lena.js is a tiny library for image processing. It allows you to  apply some basic image filters to an image in the document. You can include a local copy of Lena.js from your project or use the CDN or from a local copy:

<!-- Use CDN -->
<script src="https://cdn.rawgit.com/davidsonfellipe/lena.js/master/dist/lena.js"></script>

<!-- From a local copy -->
<script src="lena.js"></script>

You can download the copy from the repository at Github here or by using some package manager like bower:

bower install lena.js

For more information about this library, please visit the official repository at Github here.

2. Using Lena.js

LenaJS is pretty easy to use, you can use 2 methods namely filterImage and redrawCanvas. Those methods expects an image and a canvas that will be used to apply some filter:

Available filters

Lena.js offers a variety of filters that can be applied to your image. The following list shows the ID of every filter:

• red: Red
• gaussian: Gaussian
• grayscale: Grayscale
• highpass: highpass
• invert: invert
• laplacian: laplacian
• prewittHorizontal: Prewitt Horizontal
• prewittVertical: Prewitt Vertical
• roberts: roberts
• saturation: saturation
• sepia: sepia
• sharpen: sharpen
• sobelHorizontal: sobel Horizontal
• sobelVertical: sobel Vertical
• thresholding: thresholding

The filters are stored in the same global variable LenaJS and can be accessed through its id using the key or dot notation e.g LenaJS["prewittHorizontal"] or LenaJS.prewittHorizontal. Those properties are functions, however they are not used directly as a function by you but for LenaJS as a "constant".

How does it works?

The magic happens with the LenaJS.filterImage method. This method expects as first argument the canvas where the image with filter should be rendered, as second argument the filter (as a constant) that will be applied and as last argument the IMG element that stores the image. The image can be either a file loaded through src or as data URI base64:

<!-- Image to apply filters -->
<img id="original-image" src="./image.png" />
<!-- or with data URL
    <img id="original-image" src="data:image/png....." />
-->

<canvas id="filtered-image"></canvas>

<script>
    // Get the image
    var originalImage = document.getElementById("original-image");
    // The canvas where the processed image will be rendered (With filter)
    var filteredImageCanvas = document.getElementById("filtered-image");

    // Filter to apply, in this case the red filter
    var filter = LenaJS["red"];

    // Apply the filter
    LenaJS.filterImage(filteredImageCanvas, filter, originalImage);
</script>

You can lastly export the image with the applied filter by simply getting its base64 representation with the filteredImageCanvas.toDataURL("image/png") method.

Applying multiple filters

As mentioned, the filterImage method applys a single filter to an image, however if you execute it again, the start filter will be removed. So if you want to apply a filter after another, you will need to use the redrawCanvas method instead. This method expects as first argument the canvas where an image with a filter has been already rendered and as second argument the new filter that will be appended to the image:

<!-- Image to apply filters -->
<img id="original-image" src="./image.png" />
<!-- or with data URL
    <img id="original-image" src="data:image/png....." />
-->

<canvas id="filtered-image"></canvas>

<script>
    // Get the image
    var originalImage = document.getElementById("original-image");
    // The canvas where the processed image will be rendered (With filter)
    var filteredImageCanvas = document.getElementById("filtered-image");

    // Filter to apply, in this case the red filter
    var filter = LenaJS["red"];

    // Apply the initial filter
    LenaJS.filterImage(filteredImageCanvas, filter, originalImage);

    // Second filter to apply in this case the invert
    var secondFilter = LenaJS["invert"];

    // Apply the second filter (with the first filter that has been already applied)
    LenaJS.redrawCanvas(filteredImageCanvas, secondFilter);
</script>

Live example

You can play with the following fiddle:

You can visit another demo but official here in the website of the developer.

Happy coding !