Image Manipulation with CamanJS and React — Exposure, Fill, Hue, and Grayscale

Photo by Boston Public Library 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.

Exposure

We can change the exposure with the exposure method.

It takes a number between -100 and 100. A negative value decreases exposure and a positive one increases it.

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.exposure(10).render();
    });
  }, [kitten.current]);
  return (
    <div className="App">
      <img
        src={kittenPic}
        alt=""
      />
      <img
        id="kitten"
        ref={kitten}
        src={kittenPic}
        alt=""
      />
    </div>
  );
}

to use it.

Fill Color

The fill color of an image can be changed with the fillColor method.