Необходимо разработать генератор спрайтов.
Спрайт - изображение, составленное из набора маленьких. Обычно включает css-файл с классами, указывающими на размеры и расположение каждой составной картинки.
Наличие одной картинки вместо многих ускоряет загрузку сайта, т.к. не требуется загрузки большого количества дополнительных изображений.
Пример изображения:
пример css-кода:
.icon {
display: inline-block;
background-image: url(img/sprite.png);
}
.icon_like {
background-position: -48px 0;
width: 50px;
height: 50px;
}
Пример использования HTML:
<i class="icon icon_like"></i>
Работа генератора следующая:
- С помощью кнопки «Загрузить изображения» (input[multiple]), пользователь выбирает несколько картинок
- При нажатии на кнопку «Сгенерировать спрайт», пользователь получает прямо на странице готовое изображение и содержимое css-файла для встраивания на сайт.
- Пользователь может делать дозагрузку картинок, выбрав сначала одни, а следом другие изображения.
- Базовый - результирующая картинка выстраивается в одну линию (очень длинная или очень высокая), т.е. каждая следующая картинка встает в тот же ряд или в ту же колонку в изобаражении (как в примере работы).
- Со звёздочкой: результирующее изображение имеет приблизительно равные ширину и высоту для того, чтобы занимать меньше места (как на первой картинке).
Для генерации общего изображения вам понадобятся знания, полученные в лекции «Рисование в Canvas».
Подключение обработчиков событий следует описывать в методе registerEvents
Потребуется только ваш браузер.
- Открыть код в песочнице.
- Нажать кнопку «Fork».
- Выполнить задание.
- Нажать кнопку «Save».
- Скопировать адрес страницы, открытой в браузере.
- Прислать скопированную ссылку через личный кабинет на сайте netology.ru.
Потребуются: браузер, редактор кода, система контроля версий git, установленная локально, и аккаунт на GitHub или BitBucket.
- Клонировать репозиторий с домашними заданиями
git clone https://github.com/netology-code/hj-homeworks.git
. - Перейти в папку задания
cd hj-homeworks/file-api/sprite-generator
. - Выполнить задание.
- Создать репозиторий на GitHub или BitBucket.
- Добавить репозиторий в проект
git remote add homeworks %repo-url%
, где%repo-url%
— адрес созданного репозитория. - Опубликовать код в репозиторий
homeworks
с помощью командыgit push -u homeworks master
. - Прислать ссылку на репозиторий через личный кабинет на сайте netology.ru.