О web-разработке
и даже немного больше...

Динамическое масштабирование изображений в Bitrix

dinamicheskoe-masshtabirovanie-izobrazhenij-v-bitrixМасштабирование изображений позволяет получать нужный размер изображения из исходного, путем сжатия изображения на стороне сервера, либо средствами браузера. Сжимая изображение средствами браузера, мы имеем существенные недостатки, это то, что файл изображения передается в исходном виде, кроме всего прочего мы создаем дополнительную нагрузку для браузера, чтобы тот в свою очередь просчитал масштабы, прежде чем показывать его. Теперь поговорим об альтернативном, на мой взгляд, методе масштабирования изображений.

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

Так как речь идет о масштабировании изображений в системе Bitrix, то для этих целей в системе предусмотрен специальный метод ResizeImageGet, который является методом класса CFile.

Немного о работе данного метода. Данный метод создает миниатюру изображения указанных размеров, и размещает их в директорию /upload/resize_cache/путь.

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

Синтаксис:

array CFile::ResizeImageGet( 
    mixed file, 
    array arSize, 
    const resizeType = BX_RESIZE_IMAGE_PROPORTIONAL, 
    bool bInitSizes = false, 
    array arFilters = false, 
    bool bImmediate = false, 
    bool jpgQuality = false
);

Параметры:

  • file — Идентификатор файла из таблицы b_file или массив описания файла (Array(FILE_NAME, SUBDIR, WIDTH, HEIGHT, CONTENT_TYPE)), полученный методом GetFileArray.
  • Size — Массив в виде Array(width=>WIDTH, height=>HEIGHT) со значениями ширины и высоты для уменьшаемой картинки. Оба ключа обязательны.
  • resizeType — Тип масштабирования:
    BX_RESIZE_IMAGE_EXACT — масштабирует в прямоугольник $arSize c сохранением пропорций, обрезая лишнее;
    BX_RESIZE_IMAGE_PROPORTIONAL — масштабирует с сохранением пропорций, размер ограничивается $arSize;
    BX_RESIZE_IMAGE_PROPORTIONAL_ALT — масштабирует с сохранением пропорций, размер ограничивается $arSize, улучшенная обработка вертикальных картинок.
  • InitSizes — Флаг возвращения в результирующем массив размеров измененной картинки. True — возвращает, false — нет
  • Filters — Массив для постобработки картинки с помощью фильтров (Array(name => sharpen, precision => 15)). Фильтров пока один — sharpen. Задавать его не обязательно — будет инициализирован автоматом. Используется для наведения резкости у миниатюр.
  • Immediate — Флаг передается в обработчик события OnBeforeResizeImage, по смыслу означает масштабирование непосредственно при вызове метода. Обработчик в принципе может выполнять отложенное масштабирование.
  • jpgQuality — Число, устанавливающее в процентах качество JPG при масштабировании. Чем больше значение, тем выше качество и больше размер файла изображения.

Метод возвращает массив вида:

array(
    'src',  // путь к уменьшенной картинке относительно корня сайта.
    'width',  // Если bInitSizes = true ширина уменьшенной картинки, иначе 0.
    'height',  // Если bInitSizes = true высота уменьшенной картинки, иначе 0.
)

Пример:

<?
$rsUser = CUser::GetByID($arResult["User"]["ID"]);
$arUser = $rsUser->Fetch(); 
$arImg = CFile::ResizeImageGet(
			$arUser["PERSONAL_PHOTO"],
			array('width' => 60, 'height' => 60),
			BX_RESIZE_IMAGE_PROPORTIONAL_ALT,
			true
		);
?> 
<a  href="#">
<img src="<?=$arImg["src"]?>" width="<?=$arImg['width']?>" height="<?=$arImg['height']?>" />    
</a>
Опубликован: 02.09.2015 г.

См. также:

«Не удалось установить соединение с сервером. Проверьте …».
Получение Email-адреса покупателя в заказе (Bitrix D7)
Работа с URL-адресами в Bitrix D7
Работа с купонами в Bitrix API
Добавляем пункт меню для списков в админке Битрикс
Диалоговые окна в Bitrix API
Создание инфоблока при установке модуля
Создание копии корзины из заказа на Bitrix D7

Добавить комментарий

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

Комментарии
  • Загрузка...
Друзья сайта