Adattare altezza e larghezza ad un'immagine creata in php

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:

Codice PHP:

---

<?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:

Codice PHP:

---

<?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!

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:

Codice PHP:

---

<?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);

?>

---

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:

Codice:

---

12 : $size = 10 : $font_size

---

Che si risolve come segue:

Codice:

---

$font_size = ($size * 10) / 12

---

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

Codice:

---

$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ì:

Codice PHP:

---

<?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.

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