Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/id-andyyy/image-editing-tool
🌃🎨 A website that lets you edit your photos in a snap.
https://github.com/id-andyyy/image-editing-tool
canvas css html image-editor javascript js vanilla-js
Last synced: about 1 month ago
JSON representation
🌃🎨 A website that lets you edit your photos in a snap.
- Host: GitHub
- URL: https://github.com/id-andyyy/image-editing-tool
- Owner: id-andyyy
- Created: 2024-06-21T15:37:51.000Z (6 months ago)
- Default Branch: main
- Last Pushed: 2024-08-16T20:05:34.000Z (4 months ago)
- Last Synced: 2024-08-16T21:25:22.201Z (4 months ago)
- Topics: canvas, css, html, image-editor, javascript, js, vanilla-js
- Language: CSS
- Homepage: https://id-andyyy.github.io/Image-Editing-Tool/
- Size: 2.96 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README-ru.md
Awesome Lists containing this project
README
![Арт](https://i.postimg.cc/VkzY0nM6/art.png)
![GitHub Created At](https://img.shields.io/github/created-at/id-andyyy/Image-Editing-Tool?style=flat&color=%23AA3FF6)
![Lines Of Code](https://tokei.rs/b1/github/id-andyyy/Image-Editing-Tool?style=flat&category=code&color=%23EC664A)
![Top Language](https://img.shields.io/github/languages/top/id-andyyy/Image-Editing-Tool?style=flat)
![Website](https://img.shields.io/website?url=https%3A%2F%2Fid-andyyy.github.io%2FImage-Editing-Tool%2F&style=flat)# Image Editing Tool 🎨
Сайт с возможностью редактировать и затем скачивать свои изображения 🌌.
## Описание
Пользователь загружает свою картинку или использует изображение по умолчанию. Далее он может изменять следующие свойства:
- Фильтры:
- Насыщенность
- Яркость
- Контраст
- Оттенок
- Размытие
- Сепия
- Инверсия цветов
- Ориентация:
- Отражение по вертикали
- Отражение по горизонтали
- Граница:
- Толщина обводки
- Цвет обводки
- Закругление угловКаждое свойство настраивается с помощью ползунков, чекбоксов или области выбора цвета. Рядом с каждым ползунком располагается кнопка сброса, которая устанавливает значение свойства по умолчанию 🔄.
В конце пользователь может скачать полученное изображение в формате `png`.
## Демонстрация
Посетите [сайт](https://id-andyyy.github.io/Image-Editing-Tool/) или посмотрите демонстрацию (клик на картинку) 👇
[![Превью](https://i.postimg.cc/yx6PSfVj/preview.png)](https://youtu.be/wU4k40RQtR0)
## Технологии и инструменты
![HTML5](https://img.shields.io/badge/html5-%23E34F26.svg?style=for-the-badge&logo=html5&logoColor=white)
![CSS3](https://img.shields.io/badge/css3-%231572B6.svg?style=for-the-badge&logo=css3&logoColor=white)
![SASS](https://img.shields.io/badge/SASS-hotpink.svg?style=for-the-badge&logo=SASS&logoColor=white)
![JavaScript](https://img.shields.io/badge/javascript-%23323330.svg?style=for-the-badge&logo=javascript&logoColor=white&color=yellow)
![Figma](https://img.shields.io/badge/figma-%23F24E1E.svg?style=for-the-badge&logo=figma&logoColor=white&color=ad63f7)
![Git](https://img.shields.io/badge/git-%23F05033.svg?style=for-the-badge&logo=git&logoColor=white&color=f14e32)Особенности разработки:
- Используется особый прием для вычисления адаптивных величин ([смотреть код](https://gist.github.com/id-andyyy/92bffcaa37c60c395324fe26b1a518d6))
- Адаптивная вёрстка подстраивается под любое устройство
- Все элементы ввода (ползунки, чекбоксы, выбор цвета) выглядят одинаково в разных браузерах
- Прописана обработка ошибок при загрузке изображения пользователем
- Анимации при наведении на различные элементы
- Фоновые декоративные элементы
- БЭМ методология
- Чистый JavaScript (код разбит на функции)
- Настроены мета-теги## Реализация функционала
При изменении ползунков картинке добавляются соответствующие CSS свойства. При скачивании картинка вместе со всеми свойствами перерисовывается на `canvas`. После этого содержимое `canvas` преобразовывается в изображение `png` и готовится к скачиванию.
Подробнее в файле [index.js](js/index.js).
## Обратная связь
Буду признателен, если вы поставите звезду ⭐. Если вы нашли баг или у вас есть предложения по улучшению, используйте раздел [Issues](https://github.com/id-andyyy/Image-Editing-Tool/issues).
## Благодарности
Благодарность за идею дизайна сайта [strawberry2892 🍓](https://github.com/strawberry2892).
Читать на [английском 🇬🇧](README.md)