php - Using PHP imageftbbox - adjust image size to font size output?

Question

I'm using PHP imageftbbox to create some dates that are calculated and rendered as an image.

They currently render to an image block so my font size is largely irrelevant apart from for creating higher resolution results. The problem I have is that if I have for instance the result provide two different dates (say February and March) then the font sizes appear differently in my resulting page as obviously it's expanding the March date to fill the box.

How can I make the sizing apply to what the font size actually spits out - so I can for instance have the same size font output no matter what the length of the content created?

    <?php
include 'deliverytimes.php';

$date = new DateTime();
$now = date("Y-m-d H:i:s");
$h = date("H:i:s"); 

$days = explode(",", $businessDaysToAdd);
if (count($days) > 1) {
      
    $two_weekdays_later_1 = strtotime(date("Y-m-d H:i:s", strtotime($now)) . " +" . $days[0] . " weekdays $h");
    $date_1 = new DateTime("@$two_weekdays_later_1"); 
    $formattedDeliveryDate_1 =  $date_1->format('jS M');
    $formattedDeliveryDate_3 =  $date_1->format('jS \o\f F');
    
    $two_weekdays_later_2 = strtotime(date("Y-m-d H:i:s", strtotime($now)) . " +" . $days[1] . " weekdays $h");
    $date_2 = new DateTime("@$two_weekdays_later_2"); 
    $formattedDeliveryDate_2 =  $date_2->format('jS M.');
    $formattedDeliveryDate_4 =  $date_2->format('jS \o\f F');   

    $formattedDeliveryDate1 = $formattedDeliveryDate_3;
    $formattedDeliveryDate2 = $formattedDeliveryDate_4;

    $formattedDeliveryDate = "If ordered today we estimate delivery to be approximately between " . $formattedDeliveryDate_1 . " and " . $formattedDeliveryDate_2;
} else {
    $h = date("H:i:s");   
    $two_weekdays_later = strtotime(date("Y-m-d H:i:s", strtotime($now)) . " +" . $businessDaysToAdd . " weekdays $h");
    $date = new DateTime("@$two_weekdays_later"); 
    $formattedDeliveryDate = "If ordered today we estimate delivery approximately by " . $date->format('l, jS M.');
}

$defaultOutput = 'main';
$textMobile = isset($_REQUEST['mobile']) ? $_REQUEST['mobile'] : $defaultOutput;

switch($textMobile) {
    case "main":
        $textToUse = $formattedDeliveryDate;
        break;
    case "p1":
        $textToUse = $formattedDeliveryDate1;        
        break;
    case "p2":
        $textToUse = $formattedDeliveryDate2;        
        break;
}

// Path to our font file
$font = './Inter-SemiBold.ttf';
$fontBold = './Inter-Bold.ttf';
$size = 24;
$size2 = 82;
$spacing = 0;
$bbox   = imageftbbox($size2, 0, $fontBold, $textToUse);
$width  = $bbox[2] - $bbox[6];
$height = $bbox[3] - $bbox[7];
$im    = imagecreatetruecolor($width, $height);
$xcoord = ($width - $bbox[4]) / 2;
imagealphablending($im, false);
imagesavealpha($im, true);
$white = imagecolorallocate($im, 255, 255, 255);
$black = imagecolorallocate($im, 0, 0, 0);
$grey = imagecolorallocate($im, 161, 161, 168);
$trans = imagecolorallocatealpha($im, 255, 255, 255, 127);
imagefilledrectangle($im, 0, 0, $width, $height, $trans);
//$red = imagecolorallocate($im, 239, 73, 52);

$defaultTextColour = 'white';
$textColour = isset($_REQUEST['colour']) ? $_REQUEST['colour'] : $defaultTextColour;

switch($textColour) {
    case "white":
        $textColourUse = $white;
        break;
    case "black":
        $textColourUse = $black;        
        break;
    case "grey":
        $textColourUse = $grey;        
        break;
}

// Write it
imagettftext($im, $size2, 0, -$bbox[6], -$bbox[7], $textColourUse, $fontBold, $textToUse);

// Output to browser
header('Content-Type: image/png');
header("Cache-Control: no-store, no-cache, must-revalidate, max-age=0");
header("Cache-Control: post-check=0, pre-check=0", false);
header("Pragma: no-cache");
imagepng($im);
imagedestroy($i'm);

My CSS is just

.phpimage2 {max-width:90%; display: block; margin:10px auto 5px auto}

标签： php

Answer 1

从我所看到的，给定您的代码，您生成的图像的宽度取决于$textToUse变量。我尝试了您的代码，这就是我得到的（原始大小的一半）：

我最好的猜测是您在另一个页面中使用这些图像，您已经固定了这些图像的显示宽度。由于March图像小于February图像宽度，因此它将被拉伸到与图像相同的宽度February。您在页面上看到的结果可能是这样的：

但是，这只是一个猜测，因为您问题中的代码不允许我们实际重现您的问题。另请参阅：如何创建最小的、可重现的示例。

解决方案是什么？您可以使用 CSS 来缩放图像: transform: scale(0.5);，这将允许您将其减小到固定的字体大小。这可能不适用于响应式页面，其中边界框的大小可能变化很大。这完全取决于图像是如何嵌入到页面中的，而您还没有告诉我们。