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

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.

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.fillColor("#e2e2e2").render();
    });
  }, [kitten.current]);

  return (
    <div className="App">
      <img
        src={kittenPic}
        alt=""
      />
      <img
        id="kitten"
        ref={kitten}
        src={kittenPic}
        alt=""
      />
    </div>
  );
}

to change the fill color of our image to a gray color.

We can also pass in 3 numbers for the RGB values:

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.fillColor(125, 215, 56).render();
    });
  }, [kitten.current]);

  return (
    <div className="App">
      <img
        src={kittenPic}
        alt=""
      />
      <img
        id="kitten"
        ref={kitten}
        src={kittenPic}
        alt=""
      />
    </div>
  );
}

Gamma

The gamma of the image can be changed with the gamma method.

It takes a number between 0 to infinity.

But the sane values are between 0 to 5. Values between 0 and 1 lessens the contrast and the values greater than 1 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.gamma(1.4).render();
    });
  }, [kitten.current]);

  return (
    <div className="App">
      <img
        src={kittenPic}
        alt=""
      />
      <img
        id="kitten"
        ref={kitten}
        src={kittenPic}
        alt=""
      />
    </div>
  );
}

to change the value gamma.

Greyscale

We can convert an image to a grayscale one with the greyscale method.

For example, we can wite:

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.greyscale().render();
    });
  }, [kitten.current]);

  return (
    <div className="App">
      <img
        src={kittenPic}
        alt=""
      />
      <img
        id="kitten"
        ref={kitten}
        src={kittenPic}
        alt=""
      />
    </div>
  );
}

to use it.

Hue

The hue method changes the hue of the image.

It takes a number between 0 and 100.

100 has the same hue as 360.

For instance, 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.hue(90).render();
    });
  }, [kitten.current]);

  return (
    <div className="App">
      <img
        src={kittenPic}
        alt=""
      />
      <img
        id="kitten"
        ref={kitten}
        src={kittenPic}
        alt=""
      />
    </div>
  );
}

to change the hue of our image.

Conclusion

We can change exposure, fill color, and hue of our image with CamalJS.

It also has methods to change our image to a grayscale one.