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.
Getting Caman.js library:
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
Setting the UI:
You can design the UI as per your choice,using Bootstrap, SASS, CSS or anything you like!!!
The above UI, has a <canvas></canvas> defined.And the buttons as shown in the image.
Linking Caman.js to the UI
The id of the tag canvas,was given “canvas” .Here it links the image to the canvas.
Applying effects to the image:
Its very simple to apply cool effects,to the image.
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().
To Remove effects from the image.
Add this.revert();
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 .
