Picture Editing Tool

Github to download project

How to Do image editing using JS vanila

Nowadays developers face a lot of issues while developing powerful Web Apps, like using many JS libraries for each individual function. But it’s too difficult to manage multiple libraries, and so the site pages get heavy. For this, we have developed a very simple Web App for basic editing of the image in vanilla JS. The need for this functionality came about on one of our projects “MyFlatz”; It’s an online gaming platform on which there is also an editor “Studio” where users can design his own personal Flatz (which is the term that we give to custom playing cards) Software Requirements: Editor: Sublime Text, Programming Language: Vanilla JS, Web Browser: I have to use Mozilla Firefox Developer Edition but there is no recitation we can use any browser to run this tool.

The following Steps are discussed:

1. Function for zoom in image: In these we can zoom in size of image by clicking on button “Zoom In”.
2. Function for zoom out image: In these we can zoom out size of image by clicking on button “zoom out”.
3. Function for undo image: In these we can undo image, by clicking on button “undo”. By this function we can back to “zoom in” previously perform operation.
4. Function for redo image: In these we can redo image, by clicking on button “Redo”. By this function we can back to “Zoom out” previously perform operation
5. Function for flip vertical image: In these we can flip image at vertical direction, by clicking on button “Flip Vertical”.
6. Function for flip horizontal image: In these we can flip image at horizontal direction, by clicking on button “Flip Horizontal”.
7. Now for same flip vertical and horizontal image we can perform undo and redo operation.
8. Function for Rotate image clockwise: In these we can rotate image clockwise, by clicking on button “Rotate Clockwise”.
9. Function for Rotate image Anti clockwise: In these we can rotate image Anti clockwise, by clicking on button “Rotate Anti Clockwise”. 10.Function for change background colour of image: In these we can change image background colour, by clicking on “colour picker”.

In this web application for all Button functionality I have use Vanilla JS, I not use any Java script libraries, so it is easy to use and light weight.