Build a cool Image Editor with CSS and Caman.js

Making an image editor,does not require knowledge of heavy libraries or pixel manipulation.Its very easy to do,using Caman.js and simple CSS and HTML.

Image for post
Image for post
This effects can easily be created with a few lines of code.

Run these commands in your Terminal.

npm (NodeJS): npm install caman

bower (Browser):bower install caman

Or get cdn link from: https://cdnjs.com/libraries/camanjs

You can design the UI as per your choice,using Bootstrap, SASS, CSS or anything you like!!!

Image for post
Image for post
This a sample layout

The above UI, has a <canvas></canvas> defined.And the buttons as shown in the image.

The id of the tag canvas,was given “canvas” .Here it links the image to the canvas.

Image for post
Image for post

Its very simple to apply cool effects,to the image.

Image for post
Image for post

The above code snippet,applies the effect vintage to the image.

Now you can apply the various effects to the image, just change the name of effect to, like…

lomo(),clarity(),crossProcess(),pinhole(),nostalgia(),herMajesty(),sinCity().

Add this.revert();

Image for post
Image for post

And you have a ready to use cool image editor.

Hope you enjoyed this. Here is the sample code,feel free to try and play around it .

https://code.sololearn.com/WFVtfxq6G7hb/?ref=app

Deep Learning enthusiast | Adobe WIT Scholar'21

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