Skip to content
master
Switch branches/tags
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
 
 
 
 

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.

About

Javascript image filters and effects

Resources

License

Releases

No releases published

Packages

No packages published