Автоматическая обработка изображений

Данный функционал предназначен для автоматического преобразования изображений — изменение размеров, обрезка, наложение водяного знака и т. д. При этом оригинальное изображение не модифицируется.

Возможности:

• изменение размера изображения;
• обрезка изображения;
• создание версий изображения для экранов с высокой плотностью пикселей (масштабирование изображения);
• наложение водяного знака (watermark).

Данный функционал охватывает следующие типы полей:

• поля «Файл» и «Множественная загрузка» компонентов;
• поля «Файл» системных таблиц;
• поля типа «Файл» пользовательских настроек инфоблоков и макетов дизайна.

Как это работает

Начиная с версии Netcat 5.9.0.18237 через переменную, которая содержит путь к картинке для определённого поля (например: $f_Image), можно задавать преобразования (примеры приведены ниже).

При выводе (при приведении к строке) переменной с преобразованиями будет сгенерирован путь к новому изображению, на основе оригинального изображения, сохранённого в соответствующем поле. При запросе по данному пути при первом запросе система создаст копию изображения и применит все указанные преобразования; полученное изображение будет сохранено по тому же сгенерированному пути, поэтому последующие запросы будут обрабатываться веб-сервером без участия скриптов.

Все сгенерированные на основе оригинала изображения хранятся в папке /netcat_files/generated/.

При изменении картинки, или при удалении поля, или объекта, или раздела и т. д., старые сгенерированные картинки для соответствующих полей будут удалены, тем самым всегда будут выводиться самые актуальные обработанные изображения, а старые сгенерированные изображения не будут лежать «мёртвым грузом». Также предусмотрена функция ручного удаления сгенерированных изображений.

Примеры использования для разных типов полей

Внимание! Перед использованием данного функционала необходима проверка на наличие данных в соответствующей переменной, иначе вызов метода приведёт к поломке сборки страницы. Актуально для всех полей, кроме «Множественная загрузка файлов».

<? if ($f_Image) { ?>
    <img src="<?= $f_Image->resize(500, 500); ?>">
<? } ?>

<? foreach ($f_Images->to_array() as $image) { ?>
    <img src="<?= $image->resize(500, 500); ?>">
<? } ?>

<? if ($cc_settings['Image']) { ?>
    <img src="<?= $cc_settings['Image']->resize(500, 500); ?>">
<? } ?>

<? if ($template_settings['Image']) { ?>
    <img src="<?= $template_settings['Image']->resize(500, 500); ?>">
<? } ?>

<? if ($current_catalogue['Image']) { ?>
    <img src="<?= $current_catalogue['Image']->resize(500, 500); ?>">
<? } ?>

<? if ($current_sub['Image']) { ?>
    <img src="<?= $current_sub['Image']->resize(500, 500); ?>">
<? } ?>

<? if ($current_user['Image']) { ?>
    <img src="<?= $current_user['Image']->resize(500, 500); ?>">
<? } ?>

Описание доступных методов-модификаторов изображения

resize($width, $height, $type)

Изменение размера изображения.

crop($width, $height, $x, $y)

Обрезка изображения.

watermark($http_path, $mode)

Наложение водяного знака на изображение.

scale($factor)

Получение пути к масштабированной копии изображения.

При использовании метода as_img() к тегу <img> автоматически добавляется атрибут srcset с путями к вариантам изображения с масштабами 1.5x, 2x, 3x и 4x. Это позволяет автоматически отображать на устройствах с дисплеем с высокой плотностью пикселей чёткую копию изображения.

Например, если картинка уменьшена до 100×100 точек, будут доступны варианты изображения с размерами 100×100 (например, для 21,5″ монитора с разрешением 1920×1080 и плотностью пикселей 102 ppi), 150×150 (например, для планшета Surface 3 с 204 ppi), 200×200 (например, для MacBook Pro 15 с 221 ppi), 300×300 (например, для Samsung Galaxy S5 с 432 ppi) и 400×400 (например, для Samsung Galaxy S6 с 576 ppi), из которых веб-браузером, в зависимости от возможностей устройства и соединения, будет выбрано наиболее подходящее.

Метод scale может понадобиться, если путь к масштабированному изображению нужен для каких-либо других целей — например, для формирования тега <picture> или CSS:

<?php
if ($f_Image) {
    $resized_image = $f_Image->resize(320, 240);

    $style = "
        width: 320px;
        height: 240px;
        background-repeat: no-repeat;
        background-image: url('{$resized_image}');
        background-image: -webkit-image-set(
            url('{$resized_image}') 1x,
            url('{$resized_image->scale(2)}') 2x
        );
    ";

    echo '<div style="' . $style . '"></div>
}

Дополнительные методы

as_img($attributes)

Выводит тег <img> для изображения.

Примеры использования методов

1. Простой вывод изображения из поля
<img src="<?= $f_Image; ?>">

2. Проверка на наличие данных
<? if ($f_Image) { ?>
   <img src="<?= $f_Image; ?>">
<? } ?>

3. Вывод сразу с тегом "img"
<? if ($f_Image) { ?>
   <?= $f_Image->as_img(); ?>
<? } ?>

4. Изменение размера изображения
<? if ($f_Image) { ?>
   <?= $f_Image->resize(100, 100)->as_img(); ?>
   <?= $f_Image->resize(100, 100, nc_ImageTransform::RESIZE_TO_HEIGHT_WITH_CROP)->as_img(); ?>
<? } ?>

5. Обрезка изображения
<? if ($f_Image) { ?>
   <?= $f_Image
           ->crop(50, 50, 20, 20)
           ->as_img(array(
               'title' => 'Обрезка квадрата 50×50 px с отступом от левого верхнего угла по 20 px'
           )); ?>
<? } ?>

6. Наложение водяного знака
<? if ($current_user['Avatar']) { ?>
   <?= $current_user['Avatar']->watermark('netcat_files/wm.png')->as_img(); ?>
<? } ?>

7. Копия изображения для экрана с высокой плотностью пикселей
<? if ($template_settings['HeaderImage']) { ?>
   <?= $template_settings['HeaderImage']->resize(100, 100)->scale(2); ?>
<? } ?>

8. Комбинирование параметров
<? if ($f_Image) { ?>
    <?= $f_Image->crop(300, 300)->resize(50, 50)->watermark('img.jpg')
                ->as_img(array('id' => 'some_id')); ?>
<? } ?>

Важно! Порядок выполнения обработки не зависит от порядка вызова методов, и заранее предопределён: сначала происходит изменение размера изображения, затем обрезка, затем наложение водяного знака. Если преобразование не задано методом — оно не выполняется.

Ручное удаление созданных изображений

Если есть необходимость ручного удаления сгенерированных изображений — можно воспользоваться методом

nc_image_generator::remove_generated_images($entity = null, $field = null, $object = null, $file = null)

Примеры использования

// Удаление всех изображений.
nc_image_generator::remove_generated_images();

// Удаление изображений компонента с ID 169.
nc_image_generator::remove_generated_images(169);

// Удаление всех изображений поля Image пользовательских настроек инфоблоков.
nc_image_generator::remove_generated_images('class_settings', 'Image');

// Удаление сгенерированных изображений из системной таблицы пользователя
// для пользователя с ID 3, из поля с ID 190.
nc_image_generator::remove_generated_images('user', 190, 3);

// Удаление сгенерированных изображений компонента с ID 344,
// из поля "Множественная загрузка" с ID 759,
// для объекта с ID 12, только для третьего изображения в поле.
nc_image_generator::remove_generated_images(344, 759, 12, 3);

Дополнительная информация

• Теперь функция nc_image_edit_inline() не нужна, в режиме редактирования форма визуального изменения файлового поля в компоненте автоматически генерируется для авторизованных пользователей, имеющих нужные права.
• Изменённые копии изображения генерируются при первом обращении к ним через веб-сервер. Если путь до изображения не будет вставлен в тег <img> (не будет использован метод as_img(), и результат выполнения не помещён в тег), то изображения не будут сгенерированы системой и помещены в папку для сгенерированных изображений.
• Пути, при запросе к которым генерируются изображения, включают в себя хэш, который предотвращает создание несанкционированных копий изображения с произвольными параметрами (что позволяет защититься, например, от атаки злоумышленника, направленной на исчерпание свободного пространства на сервере, или попытки получения исходной копии изображения без водяного знака).
• Все файлы, кроме изображений, а также файлы формата svg и bmp отдаются без изменений.