CamanJS

Released 7 years ago , Last update 7 years ago

Pure Javascript HTML5 (Ca)nvas (Man)ipulation

The main focus of CamanJS is manipulating images using the HTML5 canvas and Javascript. It's a combination of a simple-to-use interface with advanced and efficient image/canvas editing techniques. It is also completely library independent and can be safely used next to jQuery, YUI, Scriptaculous, MooTools, etc.

CamanJS is very easy to extend with new filters and plugins, and it comes with a wide array of image editing functionality, which is only growing as the community makes more plugins.

Please visit the offical website for more examples and documentation.

Recommended Browsers:

  • Google Chrome
  • Firefox >= 4
  • Safari >= 5
  • Opera >= 11
  • Internet Explorer >= 9 
4.5
  • 5 1
  • 4 1
  • 3 0
  • 2 0
  • 1 0
2 Reviews Read Reviews

Pricing

14 day 14-day money-back guarantee

FREE

BSD license

The BSD license is an open-source license.

Basic Usage

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...

    this.render();
});

You can also directly point to an image if you don't want to create a separate canvas element. In this case, the image element will be replaced with the canvas element, and the canvas will be drawn with the image content:

Caman("#image-id", function () {
    this.contrast(-5).render();
});

You can now even save images after they've been modified! With the current implementation, users will have to rename the file to something.(png|jpg) since they get redirected to the base64 encoding of the image and the browser doesn't know the file type. The save() function defaults to png, but you can override this and specify either png or jpg.

Caman('img/example.jpg', '#image-caman', function () {
  this.saturation(-20);
  this.brightness(10);

  this.render(function () {
    this.save('png'); // shows a download file prompt

    // or...
    this.toBase64(); //  base64 data URL representation of the image. useful if you want to upload the modified image.
  });
});

Editing Remote Images

CamanJS can even edit images that are stored remotely. Since the browser enforces a same-origin policy for editing canvas data, we have to load the image data via a local proxy. CamanJS comes with a PHP proxy (you're welcome to add a proxy in the language of your choice) that you can use in the proxies folder. Before you use CamanJS for editing, all you have to do to enable the proxy is: // Will use the PHP proxy in the proxies folder. You can also specify a URL instead of calling useProxy(). Caman.remoteProxy = Caman.useProxy('php'); If no proxy is defined when a remote image is attempted to be edited, an error will be thrown.

License » BSD license Download

Get A Quote

What do you need?
  • Custom development
  • Integration
  • Customization / Reskinning
  • Consultation
When do you need it?
  • Soon
  • Next week
  • Next month
  • Anytime

Thanks for getting in touch!

Your quote details have been received and we'll get back to you soon.


Or enter your name and Email
No comments have been posted yet.