Image Manipulation with CamanJS and React — Cropping, Resizing, Events, and Brightness

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.

Cropping and Resizing

We can use CamanJS to crop and resize images.

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.resize({
        width: 100,
        height: 100
      });
      this.render();
    });
  }, [kitten.current]);

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

to call this.resize to resize the image.

We can call this.crop to crop our image:

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

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

Events

CamanJS emits events that let us run callbacks when an event is emitted.

For example, we can listen to events on all CamanJS instances, by writing:

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

  useEffect(() => {
    window.Caman.Event.listen("processStart", function (job) {
      console.log(job.name);
    });
  }, [kitten.current])

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

We added a 2nd useEffect hook to listen to the processStart event.

This event is emitted if an image manipulation method is called.

job is an object with the name property to show the method that’s called.

The Caman.Event.listen method listens to all CamanJS instances.

If we want to only listen to one instance, we can pass in an extra argument to listen :

import React, { useEffect } from "react";
import kittenPic from './kitten.jpg'

export default function App() {
  const kitten = React.useRef(null);

  useEffect(() => {
    const c = window.Caman(`#${kitten.current.id}`, function () {
      this.brightness(10);
      this.contrast(30);
      this.render();
    });

    window.Caman.Event.listen(c, "processComplete", function (job) {
      console.log(job.name);
    });
  }, [kitten.current]);

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

Caman returns an object that we can pass into the listen method to listen the events emitted by the CamanJS instance.

Brightness

We can adjust the brightness with the brightness method. It takes a number between -100 and 100.

Negative number darkens the image and position number lightens 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.brightness(15).render();
    });
  }, [kitten.current]);

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

to brighten the image.

Conclusion

We can listen to events emitted by CamanJS and change the brightness of our images.