burunyuu23/imgomg

krutoi editor photo (по крайней мере он таким задумывался)

ImgOmg

krutoi editor photo (по крайней мере он таким задумывался)

---

Оглавление

1. Возможности
   • Регистрация и вход
   • Наглядная демонстрация функционала редактора
     • Цвет
     • Размер
     • Сжатие
     • Приколы
     • Слои
   • Профиль пользователя
2. Стек технологий
   • Frontend
     • Адаптивность
   • Backend
     1. Микросервис авторизации
        • Структура
     2. Микросервис редактирования изображений
        • Структура
   • База данных
   • Nginx
3. Запуск

---

Документация , но на самом деле это отчёт по практике, я подумал почему бы и нет. Не будет же она просто так валяться.

Документацион

---

Проект представляет из себя веб-ресурс для простейших манипуляций над изображениями.

Главный экран

Возможности

• https:

https сертификаты находятся в '/frontend/certs'

• Регистрация, идентификация, авторизация через jwt-токен:

Меню регистрации

---

Меню авторизации

---

Красивое автозаполнение

---

jwt в куках

---

• Меню редактора:

1. Цвет

Можно сделать красиво.

2. Размер

Радужный прямоугольник выделяющий область для обрезки фотографии переливается радугой.

(теперь радужный прямоугольник ещё более радужный!)

3. Сжатие

ЖПЕГ. (реализация .ppeg, а также .ppega будет добавлена в следующих версиях)

4. Приколы

дрейн генг романчик-манчик сёма, влада карасёва, макс всем привет! Заставляет задуматься о бренности. Клепаем крипипасты.

Изображение после редактирования:

АХЫФДАФЫЗЛАЛЗЩЙЦЛЩАЗЙЦ, пока делал ридми нашел багфичу с конфликтом пост-запросов компресса и приколов..

5. Поддержка слоёв

можно нажать на любой из слоёв и вы сбросите картинку до него

ещё одно изображение после редактирования, но уже со всеми пруфами

---

• Профиль пользователя:

Сайт пока что не адаптивен... Нам правда жаль, мы это исправим.

---

Ну а теперь самое интересное. Стек технологий и в целом его структура.

Frontend:

1. Vue 3 + Vite
2. Vuetify
3. Vuex
4. Куча плагинов, по типу: js-cookie, axios, bcryptjs (помоему уже не используется), file-saver, ...
5. Компоненты: @vuepic/vue-datepicker и mdi-шки, хотелось конечно использовать fa-шки, но как-то руки не дошли.
6. Кривой дизайн
7. Огромная куча запутанного кода, который не подлежит рефакторингу.
   1. Его остаётся лишь сжечь и просить богов о милости.
8. немного адаптивности не помешает?

Backend:

Микросервис для реги, автори и идентифи:

• FastAPI + uvicorn (роутинг и запуск)
• psycopg2 + pydantic (дб, бд и модели)
• PyJWT + bcrypt (шифровка, проверка и генерация жвт) И куча всякой фигни. Надо бы реализовать всё на sqlalchemy, но крайний срок вчера сказал потом. Кстати там к фастапи сваггер прилагается, так что пируем за чужой счет.

Структура:

Есть класс PostgreConn, который принимает даннные для захода в бдшку и там всё колдует.

1. /user/signup:

• Регистрация. Нужно куча данных, которые инсертаются PC.insert_user. Пароль хешируется сразу. Возвращает жвтшку.

2. /user/check:

• Возвращает данные о юзере, данные которого мы кинули ему на растерзание. Если чето вернулось проверяет пароли у pass_hash.py.

3. /user/login:

• Проверяет юзера предыдущим пунктом, если проходит проверку возвращает жвтшку на основе user.login + "/" + user.email.
• Прикол в том, что в форме можно вводить либо почту либо логин, поэтому колхозим так.

4. /user/profile:

• Декодирует токен и селектает пользователя по декодированным данным (либо логин либо пошта)

5. /user/logout:

• Продолжаем колхозить, дамы и господа, поэтому возвращаем здесь пустой набор необходимых данных.

6.  @app.get("/", dependencies=[Depends(jwtBearer())])
    async def pong():
        return {
            'id': 0,
            'name': 'John',
            'surname': 'Doe'
        }

Микросервис для редактирования фото:

• Flask (роутинг и запуск)
• PIL (Цвета, обрезание, сжатие, наложение дрейнгенг эффекта и элегантного)
• cv2 (Кривое выгрызание фона)
• base64 (декодирование и кодирование картинок оттуда сюда)
• re, io, os, numpy, ... (понятно) И куча всякой фигни. Не успел реализовать сохранение картинок у пользователя в бдшке, чтобы можно было работы в профиле смотреть.

Ну и ладно

Структура:

Есть класс Editor, который переправляет запросы для каждого из модулей (цвет, размер, сжатие и приколы) и после обработки возвращает данные.

1. /upload:

• Собстна, загрузка фотографии в Едитор.
• Сначала декодирует картинку из base64 в PIL image.
• Потом проходит по каждому модулю, там определяется че надо ченить или пофик скипаем.
• Возвращается снова base64 из пил картинки.

2. /compress_size:

• Компрессирует и возвращает картинку и размер полученной картинки.
• Помоему я забил на размер картинки и считаю её на фронте.

3. /pre_prikol:

• Прикалываемся, но не полностью.
• Здесь мы рандомно прикалываемся из дрейн эффектов и выкидываем картинку и файл.
• Файлом мы потом в аплоад заходим и гарантированно тот эффект который нам нужен применяем. Всё это приправленно криворукостью, неоптимизированным кодом и тихим ужасом, а иногда даже и громким.

Database:

• Было бы странно увидеть здесь, что-то кроме PostgreSQL.
• В нём две таблицы с юзерами и категориями юзеров.
• Переменные окружения в database.env
• Остальное в докер композе.
• Кстати я перевёл постгру на алпину, но еще не запускал. Надеюсь оно будет нормально и не захватит заложников.

Nginx:

• Пока что не знаю, что написать.

Запуск.

НИКАКИХ БОЛЬШЕ ПУНКТОВ!!!

1. Открываете терминал в рут папке проекта!

1. Пишите docker-compose up

1. Радуетесь!!!

**круто

ставте пять звезд лайк и подписывайте на меня свои завещания. всем пока!

imgomg's Issues

ОНО РЕШАЕТ БАГИ НА ФРОНТЕНДЕ???