Visualizza il feed RSS

La strada per l'inferno è lastricata di buone intenzioni...

Testo ruotato con font definiti dall'utente

Valuta questo inserimento
di pubblicato il 31-10-2009 alle 08:46 (4218 Visite)
Vi sono due questioni che spesso vengono sollevate nell'ambito della progettazione web: la rotazione del testo via javascript (che a quanto ho capito è possibile solo in IE e comunque l'utente potrebbe non avere javascript attivato) e l'uso in una pagina web di caratteri non presenti sulla macchina di chi apre la pagina web. La soluzione più intuitiva (ma anche la più laboriosa) è quella di creare un immagine contenente il testo, eventualmente ruotarla e inserirla in un div all'interno della nostra pagina web.
Ma se i testi da inserire sono parecchi, diventa un lavoraccio estenuante.

Il codice che propongo di seguito risolve entrambe le questioni.

Basta inserire in un Div (dove avremmo inserito l'immagine contenente il testo ruotato) un codice di questo tipo:
codice HTML:
<img src="generafont.php?size=40&font=Clarendon.TTF&foreground=017176210&background=255255255&rot=1&testo=Masterdrive" alt="" style="border:1px solid navy;">
L'immagine viene cosi' generata dal file generafont.php (più sotto trovate il codice completo) usando i parametri passati, ovvero:
  • size : la dimensione del font
  • font : il tipo di font (TTF) che dovrà essere ovviamente caricato sul server che ospita la pagina web
  • foreground : il colore del testo in notazione RGB ( 9 caratteri)
  • background : il colore di sfondo in notazione RGB (9 caratteri)
  • rot: l'angolo di rotazione dell'immagine (0: nessuna, 1:90 gradi 2:180 gradi 3:270 gradi)
  • resto : il testo da scrivere nell'immagine

Inoltre questo script crea dinamicamente l'immagine contenete il testo (anziche appoggiarsi ad un immagine esterna) e l'immagine che viene creata è esattamente delle dimensioni del testo.

Ed ecco il codice:
File index.php
codice HTML:
<!doctype html public "-//W3C//DTD HTML 4.01 Transitional//EN">
<html >
	<head>
		<title>Chicosoft - Rotazione testo</title>
	</head>
	<body>
		<div style="width:140px;height:400px;text-align:center;">
			<img src="generafont.php?size=40&font=Clarendon.TTF&foreground=017176210&background=255255255&rot=1&testo=Masterdrive" alt="" style="border:1px solid navy;">
		</div>
	</body>
</html>
File generafont.php:
Codice PHP:
<?php
$size 
= @$_GET["size"]; /* Dimensione del font */
$font = @$_GET["font"]; /* Tipo di font */
$text = @$_GET["testo"]; /* Testo da scrivere */
$foreground=@$_GET["foreground"]; /*Colore del testo */
$background=@$_GET["background"]; /*Colore di fondo */
$rot=@$_GET["rot"]; /* Rotazione : 0->0 1->90 2->180 3->270 */


$bbox imagettfbbox($size0$font$text);

$width abs($bbox[2] - $bbox[0]);
$height abs($bbox[7] - $bbox[1]);

$image imagecreatetruecolor($width$height);

$bgcolor imagecolorallocate($imagesubstr($background03), substr($background33), substr($background63));
$color imagecolorallocate($imagesubstr($foreground03), substr($foreground33), substr($foreground63));

$x $bbox[0] + ($width 2) - ($bbox[4] / 2);
$y $bbox[1] + ($height 2) - ($bbox[5] / 2);

imagefilledrectangle($image00$width 1$height 1$bgcolor);
imagettftext($image$size0$x$y$color$font$text);


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

$deg=array (0,90,180,270); //Angolo rotazione

$image2=imagerotate($image$deg[$rot], 0);
imagepng($image2);
imagedestroy($image);

?>
Tutto qui....

Ciauz

Chico

aggiornamento da 31-10-2009 a 09:11 di chico_

Categorie
Programmazione , Open Source

Commenti

  1. L'avatar di Cteniza
    Ottimo post
  2. L'avatar di chico_
    Grazie, Luciano .
    In realtà di lavoro da fare ce n'e' ancora parecchio (allo stato attuale lo script ha un ottimo risultato su sfondi uniformi, e sto cercando di fare in modo di creare la scritta su un background trasparente... ma al momento l'effetto è deludente) ma il tuo commento positivo mi incoraggia....

    Ciauz

    Chico