Originally published at: http://www.sitepoint.com/manipulating-images-web-pages-camanjs/
A short time ago I was looking for an image manipulation library that I could use in a personal project. One library that I found and that appealed most to me was CamanJS, a JavaScript-based canvas manipulation library.
But wait… Since CSS supports basic image manipulation functionality out of the box you might be wondering why we’d want to use a JavaScript library for this. Well, besides browser support, Using CamanJS has a lot of advantages. It provides far more filters and options to manipulate images. You can create your own advanced filters and have control over every pixel in your image. You can use its built-in blend modes and layering system. And it enables you to manipulate cross-domain images and save the manipulated images.
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:
<script src="https://cdnjs.cloudflare.com/ajax/libs/camanjs/4.1.2/caman.full.min.js"></script>
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"/>
Manipulating Images via JavaScript
Alternatively, you can write a few lines of JavaScript to manipulate an image. The result when using JavaScript is no different from using the data-caman attributes.