Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
HTML canvas image-manipulation Javascript library with a very easy to use interface.
CoffeeScript JavaScript PHP
Branch: workers
Pull request Compare This branch is 4 commits behind meltingice:workers.

Fetching latest commit…

Cannot retrieve the latest commit at this time

Failed to load latest commit information.
demo
test
README.md
caman.js

README.md

About the Project

CamanJS is an attempt at providing a simple to use interface for dynamically manipulating images completely in JS. It strives to provide much of the basic functionality you would find in something like Photoshop. By this I mean, image contrast, brightness, levels, saturation, etc. At this time, something as complex as the Clone Tool is out of the question (but if you're feeling brave, be my guest).

CamanJS is also not a canvas drawing library, per se. It's main focus is manipulating images, not drawing new content.

How to Use

Using CamanJS is simple. It goes something like this:

Caman('path/to/image.jpg', '#canvas-id', function () {
    this.brightness(10);
    this.contrast(-5);
    this.saturation(-50);
    // and so on...
});

or you can use it like this:

Caman({
    src: 'path/to/image.jpg',
    canvas: '#canvas-id',
    ready: function () {
        this.brightness(10);
        this.contrast(-5);
        this.saturation(-50);
        // and so on...
    }
});

How to Extend

Extending CamanJS is easy as well. It's accomplished by adding functions onto the manip object. Below is an example of how to do so:

(function (Caman) {
    Caman.manip.fancy_filter = function (adjust) {
    
        // this.process will be run in a loop, and the
        // rgba object represents the current pixel's rgba
        // values. you *must* return the modified rgba object
        // for it to work properly.
        return this.process(function (rgba) {
            rgba.r += adjust;
            rgba.g -= adjust;
            rgba.b += adjust * 2;
            rgba.a = 0.9;
            
            return rgba;
        });
    };
}(Caman));

Utility Functions

Caman comes with a set of utility functions that you may find very useful when extending it. In the main body of the function thats extending Caman, you can simply access them through this.util.func_name(). Their names should be pretty self explanatory:

  • rgb_to_hsl()
  • hsl_to_rgb()
  • rgb_to_hsv()
  • hsv_to_rgb()
  • hex_to_rgb()

Project To-do

  • Implement a way to specify canvas elements by class instead of id, and apply effects to all found canvases.
  • Add lots more adjustments/effects
  • Figure out if there's a way to load images cross-domain (don't think there is?)
Something went wrong with that request. Please try again.