DEV Community

Rishikesh-Programmer
Rishikesh-Programmer

Posted on

Javascript image manipulation

A well known and powerful library for image manipulation is Caman.js. It offers various built-in functions as well as the possibility to be extended. Also, the library is well documented and can be used both in NodeJS and in the browser. The functions provided by CamanJS work with elements, so before getting started, you can either create a Canvas element yourself or let CamanJS replace an image with a canvas of the same dimensions.
The basic functions cover color manipulations like setting contrast/brightness or modifying the RGB channels individually as well as the possibility to increase or decrease the noise applied to the image. Advanced operations, for example working with layers, blending or cropping an image can be achieved by working with plugins.
For examples, a detailed documentation and downloading CamanJS, check out the official website.

<img id="caman-image" src="otter.jpg" />
<script src="caman.js"></script>
<script>
  Caman('#caman-image', function () {
    this.brightness(50).render();
  });
</script>

Enter fullscreen mode Exit fullscreen mode

Top comments (0)