@EvelynWaugh

Как создать изображение с помощью imagecreatefrompng() и вывести его тут же в html img tag?

Сайт на Wordpress. Есть форма квиза, и в зависимости от результата хочу чтобы создавалось изображение и сразу передавалось в facebook sharing (через мета og:image ниже). Картинка создаётся нормально, но если её выводить на этой же странице через<img src="и тут ссылка на созданную картинку" /> то оно не всегда показывается почему-то, и не всегда перекидывается в фейсбук(при шаринге нет изображения). Я думал что может не успевает обработать созданное изображение, и тогда я попробовал создавать его в форме на другой странице через ajax и потом перекидывать на страницу, где выводить это изображение - но это ничего не поменяло. В итоге есть файл в котором я создаю изображение смотря какие параметры POST приходят из формы:
$path = $tmp . '/img/cloudfont/';
	$quantity = $_POST['quantity'];
	$main = imagecreatefrompng('https://****/Sharing_quiz-1-min.png');

	$full = imagecreatetruecolor(1280, 630);
	imagealphablending($full, true);
	imagesavealpha($full, true);

	imagecopy($full, $main, 0, 0, 0, 0, 1280, 630);

	$numbers = str_split($quantity);
	$image_arr = array_map(function ($number) use ($path) {
		return $path . $number . '.png';
	}, $numbers);
	$image_tonnes_url = $quantity > 1 ? $path . 'tonnes.png' : $path . 'tonne.png';
	$images_to_add = [];
	$index = 50;
	foreach ($image_arr as $key => $image) {

		${"image_$key"} = imagecreatefrompng($image);
		imagecopy($full, ${"image_$key"}, $index, 220, 0, 0, 125, 224);
		$index += 150;
	}
	$image_tonnes = imagecreatefrompng($image_tonnes_url);
	imagecopy($full, $image_tonnes, $index, 220, 0, 0, 846, 224);
 	ob_start();
	imagepng($full, $tmp . '/img/results/buy.png');
	imagedestroy($full);
	ob_end_clean();

Далее идёт html:
<code lang="html">
<html <?php language_attributes(); ?> prefix="og: http://ogp.me/ns#">

<head>
    <meta charset="<?php bloginfo('charset'); ?>">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta property="og:image" content="<?php echo $tmp . '/img/results/buy.png?v=' . time(); ?>" /> ////вот тут шаринг фейсбук
			<meta property="og:image:width" content="1280" />
			<meta property="og:image:height" content="630" />
</head>
<body>
<img src="<?php echo $tmp .  '/img/results/buy.png'' ?>" /> ///а вот это не всегда выводит созданное изображение
</code>

Ну и js чтобы обновлять постоянно при новом изображении:
jQuery.post(
    'https://graph.facebook.com',
    {
        id: 'https://****/',
        scrape: true,
	access_token: '*****'
    },
    function(response){
        console.log(response);
    }
)
  • Вопрос задан
  • 163 просмотра
Решения вопроса 1
@rPman
Генерировать изображение и тут же выдавать его байты в вывод с помощью того же readfile, можно даже не сохранять файл (в imagepng вместо файла указать null), если не критично его кеширование на сервере.

Т.е. переноси отдачу генерацию картинки в GET запрос и ссылку на него и указываешь в фейсбук, а там где управляешь процессом (где сейчас у post запрос создает файл) только сохраняешь полученные данные, тут же можно запросить и закешировать данные с удаленного сервера, я вижу там по http исходная картинка грузится, это плохая практика делать такое внутри get запросов.
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
@AUser0
Чем больше знаю, тем лучше понимаю, как мало знаю.
Во-первых, в PHP-коде генерации HTML, в строке с комментарием есть лишняя одиночная кавычка, из-за которой код не должен исполняться.
Во-вторых, в Javascript-е полученная картинка не всовывается в HTML, а логируется в консоль.
В-третьих, вам надо не сохранять изображение на диск, а отдавать его в STDOUT через imagepng($full).
P.S. Еще и </body> отсутствует!
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы