Share your code. npm Orgs help your team discover, share, and reuse code. Create a free org »

    jsmanipulatepublic

    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

    Installation

    npm install jsmanipulate
    

    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.

    install

    npm i jsmanipulate

    Downloadslast 7 days

    1

    version

    1.0.2

    license

    MIT

    homepage

    joelb.me

    repository

    github.com

    last publish

    collaborators

    • avatar