Render HTML snippet as PNG with PHP - php

Question

In my project i must extract 3 x variables from JSON, create a small bit of HTML markup, and after that I need to create a PNG file with then (its like a google stars rating). But i don't know how to genarate the PNG file with all 3 x variables. Verr important, the PNG file must be saved in my folder project location.
$url = "https://maps.googleapis.com/maps/api/place/details/json?place_id=ChIJqSMdglkgoFMRvvPikAEYJ8w&fields=name,rating,user_ratings_total&key=AIzaSyC16f4wVfi0lJgR1AbqVYkp80o7HAIpKC8";
$json = file_get_contents($url);
$jsonObj = json_decode($json, true);
$name = $jsonObj['result']['name'] . '</br>';
$rating = $jsonObj['result']['rating'] . '</br>';
$total_reviews = $jsonObj['result']['user_ratings_total'];
?>
<span class ='number'><?php echo $rating?></span>
<?php
echo "<span class='stars'>";
for ( $i = 1; $i <= 5; $i++ ) {
if ( round( $rating - .25 ) >= $i ) {
echo "<i class='fa fa-star'></i>";
} elseif ( round( $rating + .25 ) >= $i ) {
echo "<i class='fa fa-star-half-o'></i>";
} else {
echo "<i class='fa fa-star-o'></i>";
}
}
echo '</span>';?>
</br>
<span class ='text' align = 'center'><?php echo $total_reviews?> Total Reviews</span>

Answer 1

Step 1: Create an HTML file with an img in it.
Step 2: Set the src attribute of the img to a php file. For example myimage.php
Step 3: Create the myimage.php file. And fill it with something like this:
<?php
// Set the content-type, so that the browser knows that the php file represents an image
header('Content-Type: image/png');
// Create the image
$im = imagecreatetruecolor(400, 30);
// Create some colors
$white = imagecolorallocate($im, 255, 255, 255);
$grey = imagecolorallocate($im, 128, 128, 128);
$black = imagecolorallocate($im, 0, 0, 0);
imagefilledrectangle($im, 0, 0, 399, 29, $white);
// The text to draw
// Replace path by your own font path
$font = 'arial.ttf';
// Add the text. This line is most important to you i think. 10 is the x position on the image. The second 20 is the y. See: https://www.php.net/manual/en/function.imagettftext.php
imagettftext($im, 20, 0, 10, 20, $black, $font, $yourJsonVariableHere);
// Using output the image and clear memory.
imagepng($im);
imagedestroy($im);
?>
You can add multiple imagettftext() calls to display texts on other positions. Hopefully this gets you started! To save the image. You can save the image by passing a name as the second parameter of imagepng. It will then save the image at the same spot as where the script is.
edit: To load your star images, you can first use the imagecreatefrompng() method to load your star image, and then a call to the imageCopyMerge() function to copy a star onto you resulting image ($im). I know this is not a complete solution, but this must get you closer to what you want.