Creating a simple filer editor web app
There are many tools for editing images, but most of them are very heavy and require a lot of resources. What if we could have a web tool that allows us to quickly apply filters to our images without having to download any software?
What is MiniEdit? permalink
MiniEdit is a web tool for applying filters to images. The users just need to upload an image and apply the filters they want. The filters are applied in real time, so the user can see the result immediately. And after applying the filters, the user can download the image.
Software Information permalink
- Industry: Web Editor
- Work Duration: ≈1 month
- Accessibility WCAG: AA (2.0)
- Version: 1.5
- Up to 6 filters to an image
- Increase or decrease the intensity of the filters
- Increase or decrease the brightness of the image
- Real-time preview of the image
- Image can be downloaded after applying the filters
- Usage without sign up
Development Process permalink
Creating Filter.js permalink
Filter.js is a class with methods that modify a photograph by applying filters and effects. The class has a method to load an image, and then it has methods to apply filters to the image.
The filter methods of this class perform many operations on the image, such as changing the brightness, contrast, saturation, etc. And also three-dimensional effects such as embossing, sharpening, and blurring that require three-dimensional matrices.
For example, the method to apply the emboss effect is as follows:
* Make Emboss
[-2, -1, 0],
[-1, 1, 1],
[0, 1, 2],
Designing the User Interface permalink
The user interface is designed with a responsive design, so it can be used on any device. The user interface is very simple, it has a button to upload an image, and a button to download the image after applying the filters.
MiniEdit is deployed on GitHub Pages. The deployment is done automatically when a new commit is pushed to the repository.
The source code of MiniEdit is distributed under the MIT License.