Adattare altezza e larghezza ad un'immagine creata in php

[sevenjeak]

Salve,

Forse dal titolo non capirete il mio problema, ma non sapevo come intitolare la discussione.

Cmq, ho questo script che mi genera un'immagine con un testo e la dimensione del testo specificata da un form:

<?php
if (isset($_GET["send"])) {
   $testo = $_POST["string"];
   $size = $_POST["dim"];
   
   header("Content-type: image/png");
   
   $image = imagecreate(100, 100);
   $background = imagecolorallocate($image, 225, 225, 225);
   $text_color = imagecolorallocate($image, 0, 0, 0);
   
   imagestring($image, $size, 5, 3, $testo, $text_color);
   imagepng($image);
   imagedestroy($image);
}
?>

<form action="index.php?send" method="post">
   <input type="text" name="string" value="Inserisci qui il testo.." onfocus="this.value = ''"/> - <input type="text" size="2" maxlength="2" name="dim" />
</form>

Questo codice mi crea un'immagine con altezza e larghezza 100, vorrei adattare questo due misure alla dimensione del testo inserito all'interno dell'immagine, come è possibile farlo?

L'unica cosa che mi viene in mente sarebbe utilizzare un carattere monospace (non so quale sia quello di default) e di rilevare per ogni dimensione del font quanti pixel occupa in larghezza ed in altezza un carattere.
Per esempio:

<?php

if (isset($_GET["send"])) {

    header("Content-type: image/png");

    // qui bisogna trovare il modo per stabilire altezza e larghezza di un carattere del font
    // poi le vai a salvare per esempio in $font_height e $font_width

    $testo = $_POST["string"];
    $size = $_POST["dim"];

    // qui rilevi la larghezza
    $image_width = $font_width * (strlen($testo) + 2); // il +2 serve per poter dare un po' di "padding" (sinistro e destro) al testo
    // qui l'altezza
    $image_height = $font_height * 3; // *3 sempre per il discorso del padding (questa volta superiore ed inferiore)

    $image = imagecreate($image_width, $image_height);
    $background = imagecolorallocate($image, 225, 225, 225);
    $text_color = imagecolorallocate($image, 0, 0, 0);
    imagestring($image, $size, $font_width, $font_height, $testo, $text_color);
    imagepng($image);
    imagedestroy($image);

}

?>

Se ti va bene in questo modo potrei farti un esempio con il font Courier New a dimensione fissa 10.
Ciao!

[sevenjeak]

Se ho ben capito potrei rilevare la larghezza e l'altezza di ogni singolo carattere che forma la stringa? ma come fare? potresti farmi un codice di esempio almeno capisco meglio?

Allora per fare quello che dico io è necessario però usare un font di tipo Monospace, per esempio Courier New, DejaVu Sans Mono o Bitstream Vera Sans Mono: in questi tipi di font lo spazio in pixel occupato da un carattere è uguale per tutti, ma ovviamente varia in base alla dimensione del font stesso.
Nell'esempio che ti faccio vedere ho usato come font Courier New e ho preso in esame due dimensioni, 12 e 18, le quali hanno rispettivamente le dimensioni di 10x10 e 15x15 pixel. Su questi valori poi mi sono basato per calcolare le dimensioni dell'immagine e la distanza del testo dal bordo.
Ecco l'esempio:

<?php

header("Content-type: image/png");

$text = "Ciao ciao come va? Tutto bene tu? Bene bene grazie.";
$size = 18;

// queste due variabili servono a definire le dimensioni di un carattere del font
// se usi un carattere monospace come Courier New non hai problemi a determinare
// de dimensioni di ogni carattere, in quanto tutti i caratteri hanno le stesse
// dimensioni
$font_width = 0;
$font_height = 0;

// ora con questo switch fai un controllo sulla dimensione inviata e determini
// il valore delle due dimensioni
switch($size)
{

    case 12:
        $font_width = 10;
        $font_height = 10;
        break;

    case 18:
        $font_width = 15;
        $font_height = 15;
        break;

}

// qui rilevi la larghezza
// il +2 serve per poter dare un po' di "padding" (sinistro e destro) al testo
$image_width = $font_width * (strlen($text) + 2);
// qui l'altezza
// *3 sempre per il discorso del padding (questa volta superiore ed inferiore)
$image_height = $font_height * 3;

$image = imagecreate($image_width, $image_height);
$background = imagecolorallocate($image, 225, 225, 225);
$text_color = imagecolorallocate($image, 0, 0, 0);
imagettftext($image, $size, 0, $font_width, $font_height * 2, $text_color, "CourierNew.ttf", $text);
imagepng($image);
imagedestroy($image);

?>

[sevenjeak]

Ok, l'esempio lo capito, ma quindi se io vorrei adattare l'immagine a qualunque font e a qualunque dimensione? non è possibile?

Qui ci viene in aiuto la matematica =D.
Allora la logica di questa soluzione consiste nello stabilire una proporzione con i seguenti dati:

• un carattere di base di cui si conoscono le dimensioni (12);
• le dimensioni in pixel di quel carattere (10);
• la dimensione inviata dall'utente ($size);
• l'incognita corrispondente alle dimensioni del carattere scelto dall'utente ($font_size).

Con Courier New siamo avvantaggiati in quanto ogni carattere pare ricoprire l'area di un quadrato, quindi basta impostare una sola proporzione sia per l'altezza che per la larghezza:

12 : $size = 10 : $font_size

Che si risolve come segue:

$font_size = ($size * 10) / 12

Se per esempio impostiamo $size a 18, otteniamo che:

$font_size = (18 * 10) / 12 = 15

che corrisponde proprio alla dimensione che avevo trovato nell'esempio precedente a seguito di un paio di tentativi.

Ho provato questo codice in locale e pare funzioni, tranne che per la dimensione 9, nella quale in caso di frasi lunghe l'ultima parte viene tagliata (evidentemente perchè 10 non è proprio la dimensione precisa del carattere 12, potresti provare a cambiarlo con 10.1, 10.2 eccetera per vedere quale sia quella più equilibrata), ma ho provato anche con dimensione 500 e fila tutto liscio.

Quindi il tuo nuovo codice ora dovrebbe essere così:

<?php

if (isset($_GET["send"]))
{

    header("Content-type: image/png");

    $text = $_POST['string'];
    $size = $_POST['dim'];

    // 12 : $size = 10 : $font_size
    $font_size = ($size * 10) / 12;

    $image_width  = $font_size * (strlen($text) + 2);
    $image_height = $font_size * 3;

    $image      = imagecreate($image_width, $image_height);
    $background = imagecolorallocate($image, 225, 225, 225);
    $text_color = imagecolorallocate($image, 0, 0, 0);
    imagettftext($image, $size, 0, $font_size, $font_size * 2, $text_color, "CourierNew.ttf", $text);
    imagepng($image);
    imagedestroy($image);

}
else
{

?>
<form action="index.php?send" method="post">
    <input type="text" name="string" value="Inserisci qui il testo..." onfocus="if(this.value == 'Inserisci qui il testo...') this.value = '';" onblur="if(this.value == '') this.value = 'Inserisci qui il testo...';" />
    - <input type="text" size="2" maxlength="2" name="dim" />
    - <input type="submit" value="Crea!" />
</form>
<?php

}

?>

Ti ho sistemato anche gli eventi onblur e onfocus del campo string, in modo che quando ci clicchi sopra solo se il testo è quello di base il campo viene svuotato, mentre se quando clicchi da un'altra parte se il campo è vuoto ritorna in testo di base - non so se ti interessava.

Questo è quanto, spero che sia utile come soluzione.
E poi dicono che la matematica non è bella =D.

[sevenjeak]

E pensare che nel frattempo ho pensato a tutto, tranne ad usare le proporzione, cmq grazie dell'aiuto