Image Manipulation with CamanJS and React — Color Adjustments

Photo by Robert Katzki on Unsplash

The CamanJS library lets us do image manipulation on the client-side.

We can use it with frameworks like React.

In this article, we’ll look at how to use CamanJS with React to manipulate images.

Channels

We can use the channels method to change the red, green, and blue color channels individually.

Each value can be between -100 and 100.

For example, we can write:

import React, { useEffect } from "react";
import kittenPic from './kitten.jpg'
export default function App() {
  const kitten = React.useRef(null);
  useEffect(() => {
    window.Caman(`#${kitten.current.id}`, function () {
      this.channels({
        red: 10,
        green: -5,
        blue: 2
      }).render();
    });
  }, [kitten.current]);
  return (
    <div className="App">
      <img
        src={kittenPic}
        alt=""
      />
      <img
        id="kitten"
        ref={kitten}
        src={kittenPic}
        alt=""
      />
    </div>
  );
}

Clip

The clop method lets us clip the color values when they fall outside of the given range.