Skip to content

Latest commit

 

History

History
100 lines (95 loc) · 8.24 KB

README.md

File metadata and controls

100 lines (95 loc) · 8.24 KB

Сервис генерации водяных знаков

Домашнее задание №3

Школа веб-разработки Loftschool

http://watermark.yarkevich.ru/

Что получилось

Самый лучший в настоящее время сервис генерации водяных знаков. Его отличетельной особенностями являются:

  • Умопомрачительный дизайн
  • Невероятная скорость работы
  • Богатейший функционал
  • Удобный интерфейс
  • Стабильность

К этому можно добавить стопроцентную конфиденциальность - загружаемые и выгружаемые изображения не хранятся на нашем сервере и никуда не отправляются

Сервис позволяет накладывать два изображения произвольного формата с сохранение, либо изменением прозрачности

Над проектом работали:

  • Сергей 'senja006' Яркевич - Тимлид, PHP, JavaScript
  • Алексей 'freewayspb' Чырва - Верстка, JavaScript, PHP
  • Данил 'danratnikov' Ратников - JavaScript

Реализованный функционал:

  • Загрузка исходных изображений произвольного формата
  • Два режима работы с изображениями:

    • Работа с одиночным водяным знаком
    • Режим "Замостить" - повторение водяного знака по всему исходному изображению
  • Изменение прозрачности в обоих режимах работы
  • Изменение позиции одиночного водяного знака двумя методами:

    • Метод drag'n'drop
    • Нажатие соответствующих элементов интерфейса
  • Изменение отступов между водяными знаками в режиме "Замостить"
  • Возможность смены языка интерфейса Русский - English
  • Возможность поделится ссылкой в социальных сетях Facebook, Twitter, ВКонтакте
  • Печать готового изображения на отдельном листе

Использованые инструменты:

Установка

Для установки проекта требуется: node.js, Node Package Menager(npm), Веб-сервер Apache 2.2 и модуль PHP 5.4

  • Клонировать репозиторий

    git clone https://github.com/senja006/watermark-generator.git

  • Перейти в директорию /watermark-generator

    cd watermark-generator

  • Выполнить установку необходимых npm-пакетов

    npm install

  • Собрать проект

    gulp build

  • Запустить веб сервер в директории /app

Разработка

При разработке использовался потоковый сборщик проектов Gulp. Все рабочие файлы находятся в директории /_dev. проект собирается в директории /app. При помощи команды gulp build выполняются: компиляция jade и less файлов их минификация и конкатенация в файлы /app/js/index.html и /app/css/style.min.css минификация javascript модулей и плагинов JQuery, а также их конкатенация в отдельные файлы app/js/main.min.js и /app/js/plugins.min.js. Оптимизация изображений производится плагином gulp-imagemin c дальнейшим копированием в директорию /app/img. Шрифты копируются в папку /app/fonts. Все серверные скрипты находятся в директории /_dev/

Непосредственно для изменения кода необходимо выполнить:gulp, без параметров, при этом запустятся задачи по-умолчанию. Задача 'watch' будет следить за любым изменением в директории /_dev/ и производить неоходимые изменения в /app

Сторонние библиотеки

Отдельное спасибо Вове wowua Сабанцеву за предоставленный стартовый шаблон.