Spark Filter is an Instagram-like image manipulation Web Application which is written in JavaScript and comes with pre-defined Instagram-like filters (with the same filter names and very similar effects).

Author : Sayan Maity

Spark Filter only uses a minified JavaScript code which is available on the Release page.

<script src="filterous2.min.js"></script>

• Frontend: HTML, CSS, Javascript
• Version Control: Git
• Hosting: Netlify, Github Pages

Generally when the page loads, you would find difficulty in changing the filter of the images or even navigating through diffferent Demo Images given in the website. Actually this filterous library is a little buggy! So the only way to overcome this is to reload the page 2-3 times and try to navigate between the demo pictures.
After doing these actions also if you are facing issue, feel free to drop me a mail here.

Import an image object to filterous and render as HTML with renderHtml.

filterous.importImage(imgObj, options)
  .applyFilter(filter, value)
  .renderHtml(imageDOM);

also:

filterous.importImage(imgObj, options)
  .applyInstaFilter(filterName)
  .renderHtml(imageDOM);

var imageDOM = document.querySelector('img.photo');
var imgObj = new Image();
imgObj.src = 'input/leia.jpg';

filterous.importImage(imgObj, options)
  .applyFilter('brightness', 0.2)
  .applyFilter('contrast', -0.3)
  .renderHtml(imageDOM);

Example with predefined Instagram-like effects:

filterous.importImage(imgObj, options)
  .applyInstaFilter(filterButton.id)
  .renderHtml(imageDOM);

Most effects take a value (the amount of the effects) between -1 and 1. for example, the value for the brightness() 0 means unchanged, -1 darkens the image, and 1 means full-brightness. The image will turn almost completely white.

Note: normal gives no filter effect. It normalize the image to the original.

Filterous takes an image into a canvas to manipulate the pixels of the image. Unlike the CSS filters that alters how the image appearance only on browsers, the JavaScript library actually alters the pixel color values. So you can actually download the modified image.

The CanvasRenderingContext.getImageData() method of the Canvas API returns an ImageData object representing the underlying pixel data of the canvas, and the data property of pixelData stores the color info of an each pixel in the canvas. (The diagram below shows a canvas size of only 9x9 pixel to make it simple).

Each pixel in the data array consists of 4 bytes values- red, green, blue, and alpha channel, and each of the R (red), G (green), B (blue) and A (alpha transparency) values can take values between 0 and 255.

This library alters R, G, or B values of each pixel (yes, each pixel in the entire image! so the operation can be quite slow with JavaScript!) to get filtered look.

Fork and Clone this project. Make sure you have git installed. On the terminal, navigate to your workspace directory and run it ​

Pull requests are encouraged ​

• UI part can be improved by adding some animations