Image Manipulation with CamanJS and React — Color Adjustments

Image for post
Image for post
Photo by Robert Katzki 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.

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.

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