Category: 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.

Invert

The invert method inverts the color of an image by subtracting the color channel value from 255.

For example, we can use it 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.invert().render();
    });
  }, [kitten.current]);

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

Now we see an image with inverted colors.

Noise

The noise method lets us change the noise in an image.

It takes a number from 0 to infinity

Higher values means more noise is applied.

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

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

Now we should see an image that has a TV static effect applied on it.

Saturation

We can adjust the color saturation of an image with the saturation 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.saturation(15).render();
    });
  }, [kitten.current]);

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

to change the saturation.

The argument can be between -100 and 100.

A value less than 0 will desaturate the image and values bigger than 0 saturates it.

Sepia

The sepia effect can be changed with the sepia method.

It takes an argument between 0 to 100. A larger value means a stronger sepia effect.

To use it, 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.sepia(50).render();
    });
  }, [kitten.current]);

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

Vibrance

The vibrance method is a smarter version of the saturation method.

It boosts colors that are less saturated more and boost already saturated colors less.

The argument’s range is between -100 and 100.

A negative value desaturates the image and a positive one saturates 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.vibrance(15).render();
    });
  }, [kitten.current]);

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

Conclusion

We can invert colors, add noise, change color saturation, and more with CamalJS.

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.

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.

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.

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.