Водяные знаки, оптимизация картинок, конвертация в webp

Преимущества

• Поддержка основных графических форматов: jpg, png, gif, bmp и webp.
• Полностью автоматическая обработка на лету, без необходимости вносить правки в код.
• Удобный визуальный редактор. Большое число параметров для настройки внешнего вида знака на любой вкус.
• Автоматическая конвертация всех изображений в формат WebP для ускорения загрузки сайта.
• Встроенная поддержка оптимизации без потерь качества (при наличии программного обеспечения на сервере).
• Нанесение любого количества знаков на изображение. Изменение и удаление знаков в любой момент.
• Индивидуальные знаки в каждом инфоблоке, в разделе инфоблока, на форуме, в коллекции медиабиблиотеки и в highload-блоке.
• Обработка любых модулей, установленных на сайте, даже не стандартных.
• Наличие дополнительных ограничений по сайтам, типу файла, размерам изображения и дате создания объекта.



Параметры водяного знака

• Тип. В качестве водяного знака может выступать текст или готовое изображение.

• Позиция. Место на картинке, где расположится водяной знак. Вариант "замостить" заполнит всю картинку водяными знаками. Варианты "со сдвигом" заполнят картинку в шахматном порядке. Вариант "в произвольном месте" расположит водяной знак в случайной позиции на каждой картинке.

• Прозрачность. Чем выше данный параметр, тем менее заметен водяной знак.

• Поворот. Вращение водяного знака относительно его центра.

• Масштабирование. Размер водяного знака будет автоматически подстраиваться под размер обрабатываемого изображения. Если параметр равен нулю, тогда водяной знак наложится как есть, в зависимости от исходных размеров знака, либо размера шрифта.

• Изображение. Картинка, которая будет использоваться в качестве водяного знака. Можно загрузить любое изображение форматов jpg, png, gif, bmp или webp.

• Текст. Текст водяного знака, например, адрес сайта или название компании. Может быть записан в несколько строк.

• Цвет. Цвет текста.

• Шрифт. Шрифт, которым будет написан текст. Можно загрузить любой свой шрифт в формате ttf.

• Размер шрифта. Работает только при отключенном параметре "масштабирование".

• Выравнивание. Расположение строк текста относительно друг друга.

• Междустрочный интервал. Определяет высоту строки текста.

• Обводка. Добавляет контур вокруг каждой буквы.

• Цвет обводки. Цвет контура.

• Толщина обводки. Определяет толщину линии контура. При масштабировании знака, толщина изменяется.

• Отступы. Невидимые поля по краям водяного знака. Позволяют отдалять знаки друг от друга или от края изображения.

• Качество. Снижение качества обработанных картинок. Можно подобрать значение таким образом, что визуально искажений видно не будет, однако это приведет к уменьшению веса изображения и ускорению загрузки сайта. Оптимальное значение - 85%.

• Уменьшать размеры. Если исходные картинки имеют большую ширину и высоту, их можно пропорционально уменьшить до нужных размеров, что также приведет к уменьшению веса картинки и ускорению загрузки сайта. Для изображений, уменьшенных функциями CFile::ResizeImageGet и CRamWatermark::resize, данный параметр игнорируется.

• Максимальная ширина. Обработанная картинка не будет превышать по ширине данное значение.

• Максимальная высота. Обработанная картинка не будет превышать по высоте данное значение.



Объекты и поля для обработки

Объекты и исключения настраиваются по шагам. Сначала выбирается модуль, затем дочерние объекты, вплоть до самого низшего уровня. У элементов и разделов инфоблоков, а так же элементов highload-блоков можно выбирать конкретные поля, которые нужно обработать, например, детальное изображение или свойство MORE_PHOTO.

Для обработки изображений товаров каталога, как правило, необходимо выбрать "Информационные блоки", затем "Каталог товаров" и "Элементы". Дополнительно, возможно, понадобится выбрать инфоблок с торговыми предложениями, если он присутствует.



Дополнительные ограничения

• Сайт. Если картинка используется на нескольких сайтах, можно отметить только те из них, на которых должен выводится водяной знак.

• Тип файла. Можно указать, на какие типы файлов нужно наложить данный водяной знак.

• Размеры изображения. Если размер обрабатываемой картинки не подходит, она останется без знака. Данное ограничение пригодится, например, когда не нужно накладывать знаки на миниатюры.

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



Разработчикам

Функция обработки изображений \CRamWatermark::resize($params);

Масштабирует изображение до указанных размеров и наносит водяной знак, согласно его параметрам.

В функцию передается массив:

$params = Array
(
   'file' - ID файла или массив описания файла, полученный методом CFile::GetFileArray (обязательный параметр)
   'watermark' - ID водяного знака (обязательный параметр)
   'width' - ширина картинки после масштабирования (по-умолчанию ширина исходной картинки)
   'height' - высота картинки после масштабирования (по-умолчанию высота исходной картинки)
   'resizeType' - тип масштабирования (по-умолчанию BX_RESIZE_IMAGE_PROPORTIONAL)
   'jpegQuality' - качество JPG при масштабировании (по-умолчанию 100)
)

Array
(
   SRC,
   WIDTH,
   HEIGHT,
   src,
   width,
   height
)

<?
\Bitrix\Main\Loader::includeModule('ram.watermark');

$img = \CRamWatermark::resize(Array('file' => $element['DETAIL_PICTURE'], 'watermark' => 3, 'width' => 250, 'height' => 150));
?>

<img src="<?=$img['SRC']?>"/>