1. Products
  2.   Image
  3.   JavaScript
  4.   LensJs
 
  

Open Source JavaScript Library for Image Processing

JavaScript API for applying different effects to images using different kinds of filters such as gaussian, greyscale, highpass, invert, laplacian, mirror,RGB, Roberts, saturation & more.

Lena.js is a very simple light-weight image processing library that enables software developers to work with different types of images from inside their JavaScript applications. It is a pure JavaScript library that can work on Node as well as in-browser without any external dependencies. The library is open source and is available under the MIT license. The library is not very good with heavy images inside the browser but is very efficient for the manipulation of small images.

Lena.js is very easy to use and can apply different effects to images. The image filters enable software apps to apply different effects on images with just one click. The library has included support for several important image filters, some important ones are gaussian, greyscale, highpass, invert, laplacian, mirror, noise, Prewitt, RGB, Roberts, saturation, sepia, sharpen, and many more. The library also supports applying multiple filters to an image. The filters are stored in the same global variable LenaJS and can be accessed through its id using the key or dot notation.

Previous Next

Getting Started with LenaJs

The recommended way to install LenaJs via NPM. Please use the following command to install it.

Install Lena.Js via NPM

 npm install lena.js --save

Apply Filters on Image via JavaScript

The open source Lena.js library has provided a set of useful filters that can be used to apply different kinds of effects to images inside JavaScript applications. First please provide the correct address to the image and then select the filter from the list of available filters. You can use the filterImage and redrawCanvas methods to easily apply a filter to the selected image. An image and a canvas will be used to apply the filter.

Add Noise Filter via JavaScript

 
const noise = function (pixels, amount = 0) {
  const level = amount * 255 * 0.1
  let random;

  for (let i = 0; i < pixels.data.length; i += 4) {
    random = (0.5 - Math.random()) * level;

    pixels.data[i] += random;
    pixels.data[i + 1] += random;
    pixels.data[i + 2] += random;
  }

  return pixels
}

export default noise

Applying Multiple Filters on Images

The Lena.js library enables software developers to apply multiple filters on their images inside their own JavaScript apps. Usually, a single filter is applied to an image by filterImage method. To apply multiple filters to an image you need to use the redrawCanvas method instead of filterImage. You need to pass an image already rendered with a filter as the first argument and need pass a new filter as a second argument which will be appended to the image with ease.

Processing Images via JavaScript API

The LenaJs library gives software programmers the capability to programmatically add a filter in images inside JavaScript. Applying filters with LenaJs is pretty simple, the API provides two ways to add filters; filterImage() and redrawCanvas(). You need to provide an image and a canvas to the method to apply the filter. In order to get the filter, you can user LenaJs['filername'] method and apply it to the image using filterImage() method.

Apply Contrast Filter on Images<

 
const contrast = function (pixels, amount) {
  const level = Math.pow((amount + 100) / 100, 2)

  let data = pixels.data
  let r
  let g
  let b

  for (let i = 0; i < data.length; i += 4) {
    r = data[i]
    g = data[i + 1]
    b = data[i + 2]

    r = r / 255
    r -= 0.5
    r *= level
    r += 0.5
    r *= 255

    g = g / 255
    g -= 0.5
    g *= level
    g += 0.5
    g *= 255

    b = b / 255
    b -= 0.5
    b *= level
    b += 0.5
    b *= 255

    r = r < 0 ? 0 : r > 255 ? 255 : r
    g = g < 0 ? 0 : g > 255 ? 255 : g
    b = b < 0 ? 0 : b > 255 ? 255 : b

    data[i] = r
    data[i + 1] = g
    data[i + 2] = b
  }

  return pixels
}

export default contrast
 English