Image Manipulation with CamanJS and React — Invert Colors, Saturation, and Noise

Image for post
Image for post
Photo by Greyson Joralemon 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.

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.

Written by

Web developer. Subscribe to my email list now at http://jauyeung.net/subscribe/. Email me at hohanga@gmail.com

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store