Skip to content

Latest commit

 

History

History
64 lines (41 loc) · 3.73 KB

README.md

File metadata and controls

64 lines (41 loc) · 3.73 KB
Raw

Acomics Crop

Модуль обработки изображений перед загрузкой на сайт. При загрузке изображения с помощью элемента <input type="file"> появляется всплывающее окно с возможностью кадрировать его. После кадрирования изображение также сжимается до необходимых размеров и только потом загружается.

Демо

Работу модуля можно посмотреть на демо-странице на GitHub Pages.

Также модуль работает при загрузке аватарки в настройках профиля на портале Авторский Комикс.

Подключение на сайт

Добавьте в заголовочную часть HTML-страницы теги:

<script defer src="https://cdn.jsdelivr.net/gh/mr9d/acomics-crop@master/versions/X.X.X/bundle.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/mr9d/acomics-crop@master/versions/X.X.X/bundle.css">

где X.X.X - это номер версии. Доступные версии можно посмотреть на этой странице.

Добавьте элемент для загрузки файла:

<input type="file" class="imageResizeAndCrop" data-target-width="200" data-target-height="200">

где:

  • imageResizeAndCrop - класс, по которому происходит инициализация модуля.
  • data-target-width - требуемая ширина изображения.
  • data-target-height - требуемая высота изображения.

Локальный запуск

Предварительные требования:

  • Node.js v20.13.1 или выше

Действия:

  • Клонируйте репозиторий git clone git@github.com:mr9d/acomics-crop.git
  • Перейдите в репозиторий с проектом cd acomics-crop
  • Скачайте необходимые зависимости npm ci
  • Соберите проект npm run build
  • Откройте в браузере файл demo/dev.html из директории проекта

Внести свой вклад

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

Сделайте форк чтобы работать в собственном репозитории, и откройте пул-реквест с описанием изменений, которые вы сделали.

Не забудьте также проверить изменения через npm run lint.

Используемые технологии