Image Editing Tool 🎨

A website with the ability to edit and then download your images 🌌.

Description

The user uploads their own image or uses the default image. Then it can change the following properties:

• Filters:
• Saturation
  • Brightness
  • Contrast
  • Shade
• Blur
  • Sepia
  • Inversion of colors
• Orientation:
  • Vertical reflection
  • Horizontal reflection
• Border:
• Stroke thickness
  • Outline color
  • Rounding the corners

Each property is configured using sliders, checkboxes, or a color selection area. There is a reset button next to each slider, which sets the default value of the property 🔄.

At the end, the user can download the resulting image in the png format.

Demonstration

Visit website or watch the demo (click on the image) 👇

Technologies and tools

Development features:

• A special technique is used to calculate adaptive quantities (see code)
• Adaptive layout adapts to any device
• All input elements (sliders, checkboxes, color selection) look the same in different browsers
• Error handling is prescribed when uploading an image by the user
• Animations when hovering over various elements
• Background decorative elements
• BEM methodology
• Vanilla JavaScript (the code is broken down into functions)
• Meta tags are configured

Implementation of the functionality

When you change the sliders, the corresponding CSS properties are added to the image. When downloading, the image, along with all the properties, is redrawn on the canvas. After that, the contents of the canvas are converted to a png image and prepared for download.

Read more in the file index.js.

Feedback

I would appreciate it if you put a star ⭐. If you find a bug or have suggestions for improvement, use the Issues section.

Thanks

Thanks for the idea of website design strawberry2892 🍓.

Read in Russian 🇷🇺