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

Photo by Wolfgang Hasselmann 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.

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'