Image manipulation library in JavaScript that applies filters to photos à la Instagram on browser. This script take pixel data from a photo that you want to give filter effects, and maniplute its pixels using the canvas element. The finished photo can be displayed as canvas, or as downloadable image formats such as jpeg, png, or webp for Chrome.

This works on modern mobile browsers as well.

Created by Tomomi Imura

Filterous Demo

W3C CoreMob camera - Mobile Web App

Just include filterous.js in your HTML file.

<script src="filterous.js"></script>

Filterous does not require any other depencies.

Create a new instance.

var f = new Filterous(imageObject);

Leaving the second param results a finished photo as a canvas, otherwise in a specified images format.

var f = new Filterous(imageObject, 'jpeg');

Apply a filter (or multiple filters) then render.

f.filterImage('brightness', 50);
f.render();

f.filterImage('grayscale');
f.filterImage('rgbAdjust', [1.4, 1.2, 1]);
f.filterImage('convolute', [ 0, 0, 0,
                             0, 1, 0,
                             0, 0, 0 ]
);

or add an image layer:

var starryLayer = new Image();
starryLayer.src = 'effects/stars.png';

var f = new PhotoFilter(Filterous, 'jpeg');
f.applyLayer(starryLayer);
f.render();

Reset:

f.reset();

• Import filterousEffects.js.
• Include the effects folder (contains the overlay image).

<script src="filterousEffects.js"></script>

ApplyEffects.nostalgia(imageObject, 'jpeg');

Take a look at the filterousEffects.js to see all available presets.

MIT License

Thank you html5rocks.com for the tutorial on the pixel manpulating tutorials :-)