Skip to content
This repository

Javascript image filters and effects

branch: master

Merge pull request #1 from eltuctuc/master

Clean tabs and spaces
latest commit 0a6f6c236b
Joel Besada authored June 30, 2013
Octocat-spinner-32 filter list added filter list August 01, 2011
Octocat-spinner-32 script clean tabs and spaces June 30, 2013
Octocat-spinner-32 LICENSE git commit August 01, 2011
Octocat-spinner-32 README.md README update September 12, 2011
README.md

JSManipulate

JSManipulate is an image filter and effects library written in Javascript for client-side manipulation of images on a web page.

Version: v1.0 (2011-08-01)

Developed by Joel Besada (http://www.joelb.me)

Demo page: http://www.joelb.me/jsmanipulate

MIT LICENSED (http://www.opensource.org/licenses/mit-license.php)

Copyright (c) 2011, Joel Besada

Usage

The filters are javascript objects all with a commonly named filter function. To use any of the filters, you need to input the ImageData object to be manipulated, and any optional extra parameters taken by the filter. To get the ImageData of an image, it needs to first be drawn on an HTML5 canvas object, from which you can use the getImageData function to retrieve the data.

Here is an example of a common usage scenario:

var canvas = document.getElementById('#your-canvas-element');
var context = canvas.getContext("2d");

//Get data for the entire image
var data = context.getImageData(0,0,canvas.width, canvas.height) 

//Apply a Lens Distortion effect, with 3.0 refraction and a radius of 75.
//The filter has two more parameters, centerX and centerY, but
//all filters have default values for every parameter, so we can choose not
//to specify these, leaving centerX and centerY at the default 0.5 value.
JSManipulate.lensdistortion.filter(data, {refraction: 3.0, radius: 75}); 

//Now finally put the data back into the context, which will render
//the manipulated image on the page.
context.putImageData(data,0,0);

If you are using any of the separate filters instead, note that you won't have a JSManipulate object, so to use the filter you will have to create an instance of that specific filter object:

//Instead of JSManipulate.lensdistortion.filter(...);
new LensDistortionFilter().filter(data, {refraction: 3.0, radius: 75}); 

You can check out all of the filters and their parameters in index.html in the filter list folder

Samples

Photo Editing

http://onlinephotomashup.com/

Are you using JSManipulate in a creative way in any of your web projects? Feel free to contact me on my Github profile and I'll make sure to include a link to your project here for everyone to see.

Something went wrong with that request. Please try again.