Создавайте и просматривайте обложки для страниц, групп и событий Facebook с одновременным контролем обрезки на ПК и смартфонах
Создавайте и просматривайте обложки для страниц, групп и событий Facebook с одновременным контролем обрезки на ПК и смартфонах
Обложки Facebook выполняют важные визуальные задачи для Страниц, Групп и Мероприятий. Хотя один и тот же файл служит обложкой на всех типах устройств, Facebook отображает его по-разному на мониторах компьютеров и экранах смартфонов. Для стандартной обложки Страницы (рекомендуемый размер 820×360 пикселей) на компьютерах отображается широкая горизонтальная область 820×312 px (срезая по 24 пикселя сверху и снизу), а на смартфонах — более узкая область 640×360 px (срезая по 90 пикселей слева и справа). Инструмент Создание и предпросмотр обложки Facebook обеспечивает одновременный параллельный просмотр для ПК и мобильных с единого холста, гарантируя сохранность логотипов и ключевого текста на любом экране.
Практический сценарий использования: Администратор сообщества готовит баннер с логотипом по центру и контактами у правого края. На мониторе ПК изображение выглядит гармонично, но на смартфоне контактная информация оказывается срезанной мобильным кадрированием Facebook. При проверке в режиме «Двойной просмотр» и активации метки важного содержимого система сразу предупреждает о выходе текста за пределы мобильной зоны (640×312 px). С помощью горизонтального регулятора автор легко смещает композицию в общую безопасную зону без необходимости создавать отдельные файлы.
Все кадрирование, масштабирование и выгрузка выполняются на 100% локально в браузере с помощью HTML5 Canvas API. Скачиваемый файл не содержит лишних элементов: макеты интерфейса, имитации аватаров и линии обрезки никогда не попадают в итоговый результат.
Safe Zone = [X: max(cropX_desk, cropX_mob), Y: max(cropY_desk, cropY_mob), W: min(cropW_desk, cropW_mob), H: min(cropH_desk, cropH_mob)]
Расчет общей безопасной зоны (Safe Zone) на основе пересечения границ кадрирования для десктопных и мобильных экранов.