Проект сделан с помощью :
Create React App,
Redux,
html2canvas.
В директории проекта вы можете запустить
для установки всех необходимых зависимостей из package.json
для запуска приложения в режиме разработки на http:https://localhost:3999
для запуска имеющихся тестов
для получения оптимизированной продакшн версии
для самостоятельной настройки плагинов, операция в один конец
Данное приложение предназначено для быстрого создания несложных баннеров для различных целей на Вашем сайте. Приложение состоит из трех основных блоков:
Данное меню изначально находится в закрытом состоянии. Кликните по кнопке show, для просмотра возможных настроек баннера. В настройки входит:
настройка цвета заднего фона, задается через соответствующее текстовое поле или палитру. Поддерживает установку градиента через текстовое поле;
выбор цвета шрифта, через текстовое поле или палитру;
выбор размера шрифта через текстовое поле;
выбор размеров баннера по X и Y, через соответствующие текстовые поля;
добавление картинки на баннер, путем указания ссылки на нее в соответствующем поле;
добавление ссылки на сайт, через текстовое поле;
На превью вы можете в реалном времени отслеживать все изменнения баннера.
Также, у вас есть возможность перемещать блок текста и изображения, путем перетаскивания их мышкой. Для этого нажмите на элемент ЛКМ, и не отпуская, перетащите в нужное место.
Для редактирования текста, нажмите на него два раза ЛКМ. Так вы попадете в режим редактирования и не сможете перемещать текст.
Тут предствавлены три кпопки: экспорт в .png, экспорт в формате HTML строки, сериализация настроек баннера в json. В первом случае картинка скачивается на Ваше устройство. Остальные две кнопки копируют код в буфер обмена.
Во время работы мною был обнаружен баг в библиотеке html2canvas, когда при наличии scrollbar'ов получаемый рисунок будем смещен. К сожалению, вариантов как пофиксить это я не нашел, поэтому единственное решение, которое я нашел - это избавиться от scroll'ов.
Написаны тесты на базе снепшотов, оптимально для проверки компонентов и тест передачи пропсов через redux.
За основу взят баннер с Avito, по базовым размерам и структуре:одна надпись и одна картинка. Считается, что создаваемые баннеры будут соответствовать требованиям рекламы, например в Яндексе, то есть максимальная ширина 1000px, высота 600px. Но, можно сделать и другие размеры, однако удобство пользования при этом не гарантируется.
P.S. Поставьте, пожалуйста, звездочку на репозиторий, если дочитали до этого места) Так я пойму, что не зря все писал и смог донести до вас некоторые свои мысли.