Image Manipulation with CamanJS and React

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.

Getting Started

We use CamanJS with React by creating a React project with Create React App.

To do that, we run:

npx create-react-app my-project

where my-project is the project name.

Then in the public/index.html file, we add the CamanJS’s script tag into the head tag of our React project:

<script
    src="https://cdnjs.cloudflare.com/ajax/libs/camanjs/4.1.2/caman.full.min.js"
    integrity="sha512-JjFeUD2H//RHt+DjVf1BTuy1X5ZPtMl0svQ3RopX641DWoSilJ89LsFGq4Sw/6BSBfULqUW/CfnVopV5CfvRXA=="
    crossorigin="anonymous"></script>

Then we can add an image that we want to manipulate into the src folder.

Once we did that, we can add the following to App.js :

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.brightness(10);
      this.contrast(30);
      this.sepia(60);
      this.saturation(-30);
      this.render();
    });
  }, [kitten.current]);

  return (
    <div className="App">
      <img
        src={kittenPic}
        alt=""
        style={{ width: 200, height: 200 }}
      />
      <img
        id="kitten"
        ref={kitten}
        src={kittenPic}
        alt=""
        style={{ width: 200, height: 200 }}
      />
    </div>
  );
}

We imported the image and adding it as the src of the img tag.

CamanJS only works with images that are store in the project locally.

Then in the useEffect hook, we do the image manipulation.

this is the image object we’re manipulating.

We get the image by its ID. The ID is the first argument of the Caman function.

this.brightness lets us change the brightness.

this.contrast lets us change the contrast.

this.sepia lets us change the Sepia tone.

this.saturation lets us change the saturation.

this.render renders the new image.

Now we should see the original image on the left and the one edited by CamanJS on the right.

Layers

CamanJS comes with a layering system that gives us more editing power.

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);
      this.newLayer(function () {
        this.setBlendingMode("multiply");
        this.opacity(80);
        this.fillColor('#6899ba');
        this.copyParent();
        this.filter.brightness(10);
        this.filter.contrast(20);
      });
      this.clip(10);
      this.render();
    });
  }, [kitten.current]);

  return (
    <div className="App">
      <img
        src={kittenPic}
        alt=""
        style={{ width: 200, height: 200 }}
      />
      <img
        id="kitten"
        ref={kitten}
        src={kittenPic}
        alt=""
        style={{ width: 200, height: 200 }}
      />
    </div>
  );
}

We change the exposure with the exposure method before the layer.

Then we created the layer with the newLayer method.

In the callback, we call setBlendingMode to set the blending mode.

opacity changes the opacity.

fillColor changes the fill color of the layer.

copyParent copies the content of the parent layer to the current one.

Once we called copyParent , we can call the filter methods to change the layer to make it look like what we want.

Conclusion

We can use CamanJS with React to manipulate images in our React app.