CaptainB
04-10-2009, 05:31 PM
Hi guys,
Some time ago I did some research on how to actually rotate some text on a webpage - a static image wasn't a solution as the text needed to be dynamic (in this example's and my case a date function). I was not able to find anything 'easy' with cross-browser support, so I worked out this script - some of it partly copied from other sites while some of it is modified on my own.
The script will generate a dynamic image with transparent background with the current date, a specified font and rotate it - the input and properties can of course be modified.
Paste the below in a file called image.php
Edit the "font" paths to reflect your fonts.
Display the image by following:
<img src="image.php" alt="Your ALT Text" />
<?php
// Defines the content as an PNG image
header("Content-type: image/png");
// Creates the image - edit those properties in order to change rotation and font types. I have defined two different fonts
$image = imagecreate(75, 70);
$degrees = 40;
$font = 'fonts/Jerry_B4s_handwriting.ttf';
$font1 = 'fonts/verdana.ttf';
// transparent color
$transparent_color = imagecolorallocate($image, 000, 0, 0);
// set the transparent color
imagecolortransparent($image, $transparent_color);
// fill the image with our transparent color
imagefilledrectangle($image,0,0,119,119,$transparent_color);
//imagecolorallocate($image, R, G, B) in HEX values
$font_black = imagecolorallocate($image, 2, 1, 8);
//EDIT those strings to output YOUR text
//outputs day
$string_day = date("l");
//outputs month, date
$string_rest = date("F d");
//outputs year
$string_year = date("Y");
//($image, fontsize, angle(use a combination of this and the $degrees variable), rightident(x), downindent(y), textcolor, font, data)
imagettftext($image, 13, -25, 10, 20, $black, $font, $string_day);
imagettftext($image, 10, -25, 10, 40, $black, $font1, $string_rest);
imagettftext($image, 9, -20, 10, 60, $black, $font1, $string_year);
$rotate = imagerotate($image, $degrees,0);
//Preserves transparency
imagealphablending($rotate, true);
imagesavealpha($rotate, true);
imagepng($rotate);
imagedestroy($image);
?>
The above will generate an image like the attachment.
'Unfortunately' I havn't found a way to get rid of the grunge look of the text though.
Some time ago I did some research on how to actually rotate some text on a webpage - a static image wasn't a solution as the text needed to be dynamic (in this example's and my case a date function). I was not able to find anything 'easy' with cross-browser support, so I worked out this script - some of it partly copied from other sites while some of it is modified on my own.
The script will generate a dynamic image with transparent background with the current date, a specified font and rotate it - the input and properties can of course be modified.
Paste the below in a file called image.php
Edit the "font" paths to reflect your fonts.
Display the image by following:
<img src="image.php" alt="Your ALT Text" />
<?php
// Defines the content as an PNG image
header("Content-type: image/png");
// Creates the image - edit those properties in order to change rotation and font types. I have defined two different fonts
$image = imagecreate(75, 70);
$degrees = 40;
$font = 'fonts/Jerry_B4s_handwriting.ttf';
$font1 = 'fonts/verdana.ttf';
// transparent color
$transparent_color = imagecolorallocate($image, 000, 0, 0);
// set the transparent color
imagecolortransparent($image, $transparent_color);
// fill the image with our transparent color
imagefilledrectangle($image,0,0,119,119,$transparent_color);
//imagecolorallocate($image, R, G, B) in HEX values
$font_black = imagecolorallocate($image, 2, 1, 8);
//EDIT those strings to output YOUR text
//outputs day
$string_day = date("l");
//outputs month, date
$string_rest = date("F d");
//outputs year
$string_year = date("Y");
//($image, fontsize, angle(use a combination of this and the $degrees variable), rightident(x), downindent(y), textcolor, font, data)
imagettftext($image, 13, -25, 10, 20, $black, $font, $string_day);
imagettftext($image, 10, -25, 10, 40, $black, $font1, $string_rest);
imagettftext($image, 9, -20, 10, 60, $black, $font1, $string_year);
$rotate = imagerotate($image, $degrees,0);
//Preserves transparency
imagealphablending($rotate, true);
imagesavealpha($rotate, true);
imagepng($rotate);
imagedestroy($image);
?>
The above will generate an image like the attachment.
'Unfortunately' I havn't found a way to get rid of the grunge look of the text though.