Кадрирование изображений в вебе. (Пример на Битриксе)

При разработке типовых страниц на сайтах часто возникает проблема в кадрировании изображений. Основная проблема в том, что контент-менеджеры не парятся о размерах, весе и расширении изображения при этом хотят увидеть на странице красиво сверстанный результат. Поэтому на back-endе я всегда пишу обработку для изображений загружаемых с админки.

При этом я обычно наблюдаю два сценария:
№1. Допустим у нас есть лента новостей, и у каждого поста есть превью размером 200x400. Контент-менеджер грузит в админку горизонтальную фотку и ожидает что в ленте, где все фоточки вертикальные они встанут красиво. В таких случаях я обычно кроплю фотки, загоняя их в заданный размер, в 99,9% это происходит «тупо» по центру, при этом код выглядит как-то так:

$imageFile = CFile::GetFileArray($arItem["PREVIEW_PICTURE"]["ID"]);
$arFileTmp = CFile::ResizeImageGet($imageFile,  array("width" => 388, "height" => 215),  BX_RESIZE_IMAGE_EXACT,  false,Array("name" => "sharpen", "precision" => 15));
$photo_img = $arFileTmp["src"];

№2. Во-втором случае речь обычно идет о ленте с партнерами, либо о карусели с «нашими клиентами», либо о слайдере с отзывами и т. п. В общем о случаях, когда важно показать все изображение, без обрезки. В таком случае у нас имеется некая область с заданным размером, и мы скриптом «вгоняем» нашу картинку туда. Предварительно необходимо понять изображения вертикальное или горизонтальное, дабы получить оптимальные размеры для последующей обработки функцией ResizeImageGet().

if ($imageFile["WIDTH"] > $imageFile["HEIGHT"]) 
{
	
	$width = 360;
	$height = $imageFile["HEIGHT"] * $width / $imageFile["WIDTH"];
	if ($height > 270) 
	{
		$width = 360*271/$height;
		$height = 270;
	}
}
else
{
	$height = 270;
	$width = $imageFile["WIDTH"] * $height / $imageFile["HEIGHT"];
}
$arFileTmp = CFile::ResizeImageGet($imageFile,  array("width" => $width, "height" => $height),  BX_RESIZE_IMAGE_EXACT,  false,Array("name" => "sharpen", "precision" => 15));
$photo_img = $arFileTmp["src"];

Код далеко не оптимальный, набросан «на скорую руку». В примере область для загрузки изображений размером 360x270.

Поделиться
Отправить
2017   bitrix
Популярное