Originally published at: http://www.sitepoint.com/manipulating-images-web-pages-camanjs/
Now, let’s start exploring the features that CamanJS offers!
Including Necessary Files
To start working with CamanJS simply include the library in your page. This minified CDN version that I am referencing here has all the plugins in addition to core functionality combined in a single file:
The syntax for functions has changed a little from version 3 to 4 of CamanJS. so make sure you include a version greater than 4 when working following along with this tutorial.
Manipulating Images via HTML Attributes
CamanJS can be used to manipulate images using the
data-caman attribute. The code below demonstrates you how to apply a brightness filter of strength “10” and contrast of strength “30” to an image:
<img data-caman="brightness(10) contrast(30)" src="yourimage.jpg"/>
Similar syntax is used for the other 18 filters that come prepackaged with the library. For example:
<img data-caman="love() hazyDays()" src="yourimage.jpg"/>