Create a text description image: the auxiliary function of imagefontwidth()

In PHP, when manipulating images and text, you often need to know exactly the width of the text in the picture to achieve the effects of centering, aligning, or wrapping the text. The imagefontwidth() function is a very practical tool that can help us get the character width of a specified font size, thereby accurately calculating the total width of the text. This article will introduce how to calculate text width using the imagefontwidth() function and combine it with the GD library to create an image containing text descriptions.

1. What is imagefontwidth()

imagefontwidth() is a function provided by the PHP GD library to return the character width in pixels for a specified built-in font. The parameters of this function are the size index of the font, and the value range is generally 1 to 5. The larger the number, the larger the font.

 int imagefontwidth(int $font);

For example:

 $width = imagefontwidth(3);

This code returns the width of each character with a font size of 3.

2. Calculate the text width

Since all characters in the built-in font are the same width, it is very simple to calculate the width of a string of text:

 $text = "Hello World!";
$font = 3;  // Font size index
$charWidth = imagefontwidth($font);
$textWidth = strlen($text) * $charWidth;

Here, strlen() is used to calculate the string length, multiply by the width of a single character to get the total width of the text.

3. Create a text description diagram example

The following is a complete example that demonstrates how to use the GD library to create an image containing descriptive text. The text width is calculated using imagefontwidth() and then displayed in a center.

 <?php
// Set text and font size
$text = "This is a sample text";
$font = 5;

// Calculate text width and height
$charWidth = imagefontwidth($font);
$charHeight = imagefontheight($font);
$textWidth = strlen($text) * $charWidth;
$textHeight = $charHeight;

// Create canvas size，The width is slightly larger than the text width，Moderate height
$imgWidth = $textWidth + 20;
$imgHeight = $textHeight + 20;

$image = imagecreate($imgWidth, $imgHeight);

// Assign colors
$bgColor = imagecolorallocate($image, 255, 255, 255); // White background
$textColor = imagecolorallocate($image, 0, 0, 0); // Black text

// Calculate the starting position of text，Realize centering
$x = ($imgWidth - $textWidth) / 2;
$y = ($imgHeight - $textHeight) / 2;

// Write text
imagestring($image, $font, $x, $y, $text, $textColor);

// Output image
header("Content-Type: image/png");
imagepng($image);
imagedestroy($image);
?>

illustrate:

• Use imagefontwidth() and imagefontheight() to get the character size.

• Calculate the width and height of the entire text based on the text length.

• Create a canvas with a size slightly larger than the text area to ensure that the text is not cropped.

• Calculate the text starting point coordinates to achieve horizontal and vertical centering.

• Use imagestring() to write text to the image.

• Output PNG picture.

4. Summary

• imagefontwidth() returns the width (pixel) of a single character in the built-in font.

• Combined with string length, the total text width can be calculated.

• Combined with other functions of the GD library, it is easy to create images with text.

• Centering or alignment of text is achieved by calculating precise positions.

Mastering imagefontwidth() can greatly improve your flexibility in image word processing, especially when creating dynamically generated graphic content.