[Из песочницы] Генерируем красивые картинки для социальных сетей31.10.2016 15:33

$generator = new imgGenerator();
$textGenerator=new imgTextGenerator();
$textGeneratorTop=new imgTextGenerator();

$label=$textGeneratorTop
	->seTextShadow("#000000", 75, 1, 2, 2)
	->setText("Test Site","#ffffff",imgGenerator::position_center_top,"1/12",0 )
	->setBackground("#000000",'3%')
	->setFont(DR."/upload/fonts/fonts2_7/hinted-PTF55F.ttf");

$text=$textGenerator
	->seTextShadow("#000000", 75, 1, 2, 2)
	->setText("Морковь как двигатель прогресса человечества","#ffffff",imgGenerator::position_center_center,"1/7",array(0,'5%',0,'5%'))
	->setFont(DR."/upload/fonts/fonts2_7/hinted-PTF55F.ttf");

$generator
	->addText($text)
	->addText($label)
	->fromImg($_SERVER["DOCUMENT_ROOT"] . "/upload/dynamic/2016-08/15/carrot-big.jpg")
	->resizeFor("autodetect")
	->addOverlay(0.5,"#000000")
	->show();

Примеры картинок

Алгоритм работы предполагался такой:

• Берем за основу картинку или цвет
• Уменьшаем до нужного размера
• Накладываем сверху полупрозрачный фон
• Устанавливаем логотип
• Добавляем надпись
• Кешируем результат

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

Создаем основу

Для картинки:

$this->im = new \Imagick($this->opts["img"]);

$this->im = new \Imagick();
$this->im->newImage(100,100,$this->opts["color"]);

Уменьшаем

$oldGeometry=$im->getImageGeometry();
$max=max($this->opts["resize_and_crop"]["width"],$this->opts["resize_and_crop"]["height"]);
if($max==$this->opts["resize_and_crop"]["width"]) {
	$otn=$oldGeometry["height"]/$oldGeometry["width"];
	$width=$max;
	$height=$max*$otn;
    if($height-$this->opts["resize_and_crop"]["height"] < 0) {
		$height=$this->opts["resize_and_crop"]["height"];
		$width=$height/$otn;
		$x=($width-$this->opts["resize_and_crop"]["width"])/2;
	} else {
		$x = 0;
	}
	if($position==imgGenerator::position_center_center) {
		$y=($height-$this->opts["resize_and_crop"]["height"])/2;
	}
} else {
	$otn=$oldGeometry["width"]/$oldGeometry["height"];
	$height=$max;
	$width=$max*$otn;
	if($width-$this->opts["resize_and_crop"]["width"] < 0) {
		$width=$this->opts["resize_and_crop"]["width"];
		$height=$width/$otn;
		$y=($width-$this->opts["resize_and_crop"]["height"])/2;
	} else {
		$y = 0;
	}
	if($position==imgGenerator::position_center_center) {
		$x=($width-$this->opts["resize_and_crop"]["width"])/2;
	}
}
$im->resizeImage($width,$height,\Imagick::FILTER_LANCZOS,1,false);
$im->cropimage($this->opts["resize_and_crop"]["width"],$this->opts["resize_and_crop"]["height"],$x,$y);

Сами параметры оказались такими:

Так делает Вконтакте. Написано, что обращаясь к сайту он использует vkShare в качестве User Agent. На практике оказалось, что он это делает иногда. Я не знаю с чем это связано, но при попытке расшарить новую ссылку в VK, на страницу заходили несколько раз с совершенно разными браузерами. Иногда там был vkShare.

В итоге, после ряда экспериментов, решил сделать так, что если User Agent не определился, то считаем, что это VK.

В итоге оказался следующий список социальных-роботов:

• facebookexternalhit
• vkShare
• Twitterbot
• Google
• OdklBot

Пока писал статью, скрипт обзавелся методом withoutCrop, смысл его в том, что он позволяет уменьшить и спозиционировать картинку, без ее обрезания. Это позволяет улучшить положение, если исходная картинка почти всегда является горизонтальной (например, если это обложка фильма, книги, игры и т.д.).

Накладываем полупрозрачную подложку

$geometry=$this->im->getImageGeometry();
$color=new \ImagickPixel($this->opts["overlay"]["color"]);

$overlay->newImage($geometry["width"],$geometry["height"],$color);
$overlay->setImageOpacity($this->opts["overlay"]["opacity"]);

Установка логотипа

Скрипт позволяет установить лого в любое место на картинке, в том числе и по центру.

Настройки по умолчанию подойдут почти под все случаи, но скрипт позволяет менять размер лого, отступы и позиционирование.

Надпись

Итак, создаем экземпляр ImagickDraw и устанавливаем у него различные параметры: шрифт, размер шрифта, цвет, стиль, сглаживание:

$draw=new \ImagickDraw();
$draw->setFont($this->opts["big_text_font"]);
$draw->setFontSize($fs);
$draw->setFillColor(new \ImagickPixel($this->opts["big_text"]["color"]));
$draw->setStrokeAntialias(true);
$draw->setTextAntialias(true);

function splitToLines($draw,$text,$maxWidth)
{
	$ex=explode(" ",$text);
	$checkLine="";
	$textImage=new \Imagick();
	foreach ($ex as $val) {
		if($checkLine) {
			$checkLine.=" ";
		}
		$checkLine.=$val;
		$metrics=$textImage->queryFontMetrics($draw, $checkLine);
		if($metrics["textWidth"]>$maxWidth) {
			$checkLine=preg_replace('/\s(?=\S*$)/',"\n",$checkLine);
		}
	}
	return $checkLine;
}

$draw->setTextAlignment(\Imagick::ALIGN_LEFT);

$draw->annotation(0, 0, $this->opts["big_text"]["text"]);

$textImage=new \Imagick();
$textImage->newImage($textwidth,$textheight,"none");
$textImage->drawImage($draw);

В комментариях к методу, на php.net кто-то написал формулу вида:

$baseline = $metrics['boundingBox']['y2'];
$textwidth = $metrics['textWidth'] + 2 * $metrics['boundingBox']['x1'];
$textheight = $metrics['textHeight'] + $metrics['descender'];

Честно сказать, как я ни бился, пытаясь найти смысл в массиве от queryFontMetrics в разных вариантах позиционирования текста, разным количеством строк — мне это так и не удалось.

В итоге родился такой метод: высчитываем размеры по подсказке с php.net, но увеличиваем немного ширину и высоту.

$textIm=new \Imagick();
$metrics=$textIm->queryFontMetrics($draw, $this->opts["big_text"]["text"]);
$baseline = $metrics['boundingBox']['y2'];
$textwidth = $metrics['textWidth'] + 2 * $metrics['boundingBox']['x1'];
$textheight = $metrics['textHeight'] + $metrics['descender'];
$draw->annotation ($textwidth*1.3, $textheight*1.3, $this->opts["big_text"]["text"]);

$textImage=new \Imagick();
$textImage->newImage($textwidth*3,$textheight*3,"none");
$textImage->drawImage($draw);

$textImage->trimImage(0);

$textImage->setImagePage(0, 0, 0, 0);

Тень под текстом

$shadow_layer = clone $textImage;
$shadow_layer->setImageBackgroundColor(new \ImagickPixel($this->opts["big_text_shadow"]["color"]));
$shadow_layer->shadowImage($this->opts["big_text_shadow"]["opacity"], $this->opts["big_text_shadow"]["sigma"], $this->opts["big_text_shadow"]["x"], $this->opts["big_text_shadow"]["y"]);
$shadow_layer->compositeImage($textImage, \Imagick::COMPOSITE_OVER, 0, 0);
$textImage=clone $shadow_layer;

Теперь все работает как надо.

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

Примеры работы скрипта (размер для VK):

Кстати, если вы дочитали до конца. Немного обо мне: меня зовут Дмитрий и я работаю программистом в небольшой студии. В мои задачи входит в том числе и разработка CMS, в которой уже есть много чего интересного, о чем бы хотелось поделиться.

Комментарии (1)

• unnforgiven

  31 октября 2016 в 15:16

  0

  ↑

  ↓

  Спасибо за статью, было позновательно.