Image Manipulation with CamanJS and React — Color Adjustments

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.

It takes a number between 0 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.clip(20).render();
    });
  }, [kitten.current]);

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

Colorize

The colorize method shifts the colors of an image towards the given color.

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.colorize(25, 180, 200, 20).render();
    });
  }, [kitten.current]);

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

to change the R, G, and B values with the first 3 arguments.

The last argument is the strength of the change towards the first 3 values.

We can also specify the color in hex form:

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.colorize("#4090D5", 20).render();
    });
  }, [kitten.current]);

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

Contrast

We can change the contrast of an image with the contrast method.

It takes a number between -100 and 100.

A negative number decreases contrast and a positive one increases it.

Values between 5 and 10 make the most sense.

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

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

Curves

An image’s color values can be adjusted according to a given bezier curve.

We can call the curve method to let us do the adjustment.

The first argument has the channel we wish to modify with the filter.

The rest of the arguments are the control points of the bezier curve.

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.curves('rgb', [0, 0], [100, 120], [180, 240], [255, 255]).render();
    });
  }, [kitten.current]);

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

The first argument can also be an array:

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.curves(['r', 'b'], [0, 0], [100, 120], [180, 240], [255, 255]).render();
    });
  }, [kitten.current]);

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

We just change the r and b channels with the array in the 1st argument.

Conclusion

We can change the colors, contrast, and more with the CamanJS library.

It works great with React.