Watermark by demyan1411

Демо проекта

Участники проекта

Дроздов Демьян Андреевич - Teamlead,JS, тестирование, code review, работа с git
Арбаев Тимур Михайлович - PHP, JS, тестирование, code review, работа с git
Баландин Андрей Борисович - PHP, JS, тестирование, code review, работа с git
Ким Анастасия Александровна - html, css, тестирование, code review, работа с git

Установка 💻

1. git clone https://github.com/demyan1411/waterMark.git
2. cd waterMark
2. bower install
3. npm install
4. для сборки проекта в папку dist: gulp build
5. для проверки получившейся папки dist: gulp server-dist
6. для автоматической компиляции изменений в проекте: gulp

Внимание, если после команды gulp происходит ошибка, посмотреть, какой плагин не скачался, и установить его: npm install <имя-плагина>

Cтруктура проекта

|\
| |node_modules - node-пакеты (появятся после их установки)
| |dist - папка с дистрибутивом сайта
| |app  - папка с исходным кодом
| |\
| | |bower - bower-пакеты (появятся после их установки)
| | |css   - скомпилированные css-файлы
| | |fonts - шрифты
| | |img   - картинки и иконки
| | |js    - javascript-файлы
| | |php   - php-файлы
| | |scss  - sass-шаблоны
| | |templates - jade-шаблоны
| | |uploads   - папка для загружаемых изображений
| |
| |index.html  - основная страница (компилируется из шаблонов)
|
|bower.json  - пакеты bower
|gulpfile.js - скрипты для потокового сборщика gulp
|package.json - пакеты node.js
|README.md - этот файл

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

  1. Выберите исходное изображение.
  2. Выберите водяной знак.
  3. В секции Положение с помощью кнопок или значения координат поменяйте положение водяного знака. 
  4. Поменяйте прозрачность с помощью ползунка. 
  5. Нажмите кнопку скачать,чтобы сохранить ваше творение.

Внимание

Если вы хотите замостить изображение водяным знаком, то переключите режим в правом верхнем углу.
Чтобы поменять расстояние между водяными знаками,используйте значения координат.

Особенности проекта

★ Сохранение текущего языка в cookies.

★ Всплывающие сообщения об ошибках сервера.

★ Возможность менять координаты и отступы вручную.

★ Возможность движения размноженных вотермарков от 1-ого слева до 1-ого справа, аналогично сверху снизу, вне зависимости от установленных отступов.

★ Сделаны сессии для того,чтобы несколько пользователей могли одновременно пользоваться сервисом, а также удаление устаревших картинок (нужно только включить на хостинге).

★ При обновлении страницы цвет фона рандомно выбирается из n-ого количества цветов.

Watermark