Skip to content

🎨 A simple image editor web app built with vanilla Javascript and HTML5 Canvas.

License

Notifications You must be signed in to change notification settings

craciuncezar/Simple-web-image-editor

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

34 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Simple-web-image-editor

A simple image editor web app built with vanilla Javascript and HTML5 Canvas.

Live demo here

paint

ABOUT

Begin by dragging and dropping an image from your computer. Draw on the image, crop it, and resize it before saving it to your computer. Users can choose to draw over the image using predefined forms such as ellipses, rectangles, and lines, or they can draw freely. Change the image size while maintaining the aspect ratio, or crop it to remove undesired sections. Apply filters like Grayscale, Threshold, Sephia, or Invert Colors. Do all of the above while also keeping a history of the changes and undo or redo if neeeded.

Ok, but why?

This was my first web app, it was initially written with jQuery back when frontend libs like React were not a mainstream thing yet, I decided to get rid of the jQuery part and keep things as simple as possible, no dependencies, evertything as lightweight as possible. This app is indeed a simple one, the code is not the most performing one, and it lacks features for sure, but for an app with around 450 lines of JS code I think is a darn cool one, and it does the job, a remainder that overengineering stuff is in most cases a path to failure.

Running the app

If for whatever reason you want to work on this app, you can simply open the html file in a browser, there is no need for a bundle. Or you can use a dev server. There is also an npm script using vite as a dev server:

npm install
npm run dev

Bundling is frankly optional here but it does save some bytes by minifing the js files and can be done with:

npm install
npm run build

About

🎨 A simple image editor web app built with vanilla Javascript and HTML5 Canvas.

Topics

Resources

License

Stars

Watchers

Forks