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"
       data-module-header="Ваше фото"
       data-module-description="Выберите часть изображения, которая будет использоваться в качестве аватарки">

где:

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

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

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

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

Действия:

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

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

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

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

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

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

• HTML5/CSS3
• TypeScript 5.4.5 (документация)
• Webpack 5.91.0 (документация)
• ESLint 8.57.0 (документация)
• GitHub Pages (документация)
• jsDelivr CDN (о проекте)