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

Image for post
Image for post
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'
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.

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