MosaicCollage___________________ (1)

1.

Mosaic
К А З А Н С К ИЙ ИН Н ОВ А ЦИОН Н Ы Й У Н ИВ Е Р С ИТ Е Т · Н А Б Е Р Е Ж Н Ы Е
Ч Е ЛНЫ
Collage
ДИП ЛО МН АЯ Р А Б О Т А
Разработка веб-приложения для создания
фотоколлажей с использованием HTML, CSS и
JavaScript
по специальности 09.02.07 Информационные системы и
программирование
Выполнил: Мавлиев Д. У.
Группа: УК1023/9
Руководитель: Ипатова Д. А.
Mosaic
Collage

2.

О ПРОЕКТЕ
Цель и задачи
0 2 / 11
Ш ЕСТ Ь ЗА Д А Ч РА Б О Т Ы
1
Анализ предметной области
2
Проектирование архитектуры
3
Реализация модулей
4
Адаптивный интерфейс
5
Тестирование
6
Оценка эффективности
обзор и сравнение существующих аналогов
модульная клиентская структура
Ц ЕЛ Ь РА Б О Т Ы
Веб-приложение MosaicCollage для создания фотоколлажей
прямо в браузере — бесплатно, без регистрации и без
загрузка, макеты, отрисовка, экспорт
передачи фото на сервер .
единый дизайн для десктопа и мобильных
производительность, юзабилити, безопасность
П РАК Т И Ч ЕС К АЯ З Н АЧ И М О С ТЬ
Готовый инструмент для частных лиц и организаций — разворачивается на любом
хостинге, встраивается в веб-проекты и применяется в обучении веб-технологиям.
Mosaic
Collage
экономический эффект и перспективы

3.

03 / 11
АНАЛИЗ Р Ы НКА
Сравнение с аналогами
Критерий
Adobe Photoshop
Canva / Crello
Pixlr
Стоимость
20–60 тыс. ₽/год
500–1500 ₽/мес
freemium
0₽
Без установки
✗
✓
✓
✓
Без регистрации
✓
✗
✗
✓
Фото не уходят на сервер
локально
✗
✗
✓
Без водяных знаков
✓
✗
✗
✓
Простой интерфейс
✗
✓
✗
✓
Mosaic
Collage
Mosaic
Collage

4.

РЕАЛИЗАЦИЯ
0 4 / 11
Архитектура и стек
Клиентское одностраничное приложение: после загрузки HTML, CSS и JavaScript вся логика выполняется в
браузере, без обращения к серверу. Шесть модулей слабо связаны и общаются через перерисовку холста.
SCRIPT.JS — Я Д РО ОТРИС ОВ КИ
① ЗАГРУЗКА
② М АКЕТЫ
FileReader читает файлы и создаёт
getLayoutCells() задаёт координаты
объекты Image
ячеек
/ / Вся отрисовка — в браузере, на <canvas> function drawCollage () {
ctx.fillStyle = bgColor.value;
/ / 1 · фон ctx.fillRect(0, 0 , w, h);
③ ОТРИСОВКА — ЯДРО
const cells = getLayoutCells(layout); / / 2 · ячейки cells.forEach ((cell, i) => {
④ ПАРАМ ЕТРЫ
⑤ М АСШТАБ
Ползунки и палитра → мгновенная
CSS-трансформации и перетаскивание
перерисовка
холста
ctx.
save ();
roundedRect (ctx, cell, radius);
ctx.
⑥ ЭКСПОРТ
canvas.toDataURL() → готовый PNG скачивается на устройство
clip();
});
}
Mosaic
Collage
/ / 3 · углы
ctx.drawImage(img, x, y, dw, dh); / / 4 · фото
ctx.restore ();

5.

05 / 11
ИНТ Е Р ФЕ ЙС
Главная страница и адаптив
Стеклянный хедер
Hero с CTA
3 колонки
Тёмная тема
backdrop-filter
призыв к действию
CSS Grid на десктопе
фиолетовые акценты
Mosaic
Collage

6.

РЕДАКТОР
0 6 / 11
Редактор и система макетов
2 гор.
1
2 верт.
3
SCR IPT.J S — РА СЧЁТ ЯЧЕЕК М АКЕТА
/ / Макет = набор ячеек { x, y, w, h } function getLayoutCells (layout, w, h, gap) {
switch (layout) {
case 'single' :
return [{ x: gap, y: gap,
w: w - gap*
2, h: h - gap*2 }];
case 'four' :
const cw = (w - gap*3) / 2; / / сетка 2×2
}
}
Mosaic
Collage
return [ / * 4 ячейки */ ];
4

7.

07 / 11
ФУНКЦИИ
Ключевые возможности
Полный цикл создания коллажа — от загрузки до экспорта — выполняется без перезагрузки страницы и без
сервера.
⬆
⚙