Create Blob Image in HTML based on the given Text, Width and Height in the Center of the Image without saving file

Creating images dynamically within HTML can be a powerful tool for web developers, allowing for personalized and customizable content. By leveraging PHP's GD library, developers can generate images on-the-fly based on user input or other dynamic data, without the need to store files on the server. In this article, we'll explore how to generate an image with specified text, width, and height, positioning the text at the center of the image.

Introduction:

In modern web development, the ability to dynamically generate images can greatly enhance user experiences. Whether it's generating personalized avatars, dynamic charts, or customized memes, dynamically generated images can add a layer of interactivity and personalization to websites and web applications.

Generating Images with PHP's GD Library:

PHP's GD library provides a wide range of functions for creating and manipulating images. One of its key features is the ability to generate images on-the-fly, allowing developers to create images dynamically in response to user actions or other inputs.

Creating Images with Text:

Let's dive into a basic example of generating an image with text using PHP's GD library. We'll create a function that takes the text, width, and height as parameters, and positions the text at the center of the image.

<?php
// Function to create an image with text in the center
function createImage($text, $width, $height) {
    // Create a blank image with specified dimensions
    $image = imagecreatetruecolor($width, $height);
    
    // Set background color to white
    $bgColor = imagecolorallocate($image, 255, 255, 255);
    imagefill($image, 0, 0, $bgColor);
    
    // Set text color to black
    $textColor = imagecolorallocate($image, 0, 0, 0);
    
    // Calculate text width and height
    $font = 4; // adjust font size as needed
    $textWidth = imagefontwidth($font) * strlen($text);
    $textHeight = imagefontheight($font);
    
    // Calculate text position to center it
    $x = ($width - $textWidth) / 2;
    $y = ($height - $textHeight) / 2;
    
    // Write text onto the image
    imagestring($image, $font, $x, $y, $text, $textColor);
    
    // Output the image as a base64 encoded blob
    ob_start();
    imagepng($image);
    $imageData = ob_get_clean();
    imagedestroy($image);
    
    $base64 = base64_encode($imageData);
    
    return $base64;
}

// Example usage
$text = "Hello, World!";
$width = 200;
$height = 100;

$imageBlob = createImage($text, $width, $height);
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Image with Text</title>
</head>
<body>
    <img src="data:image/png;base64,<?= $imageBlob ?>" alt="Generated Image">
</body>
</html>

This code creates a PNG image with the specified text at the center, converts it to a base64 encoded blob, and embeds it directly into an HTML <img> tag. Adjust the parameters like $text, $width, and $height as needed.

Generating images dynamically in HTML using PHP's GD library opens up a world of possibilities for web developers. By creating images on-the-fly, developers can deliver personalized and interactive content to users without the need to store files on the server. Whether it's generating avatars, charts, or custom memes, dynamically generated images can enhance the user experience and add a touch of interactivity to any web application.