So I had a need of a progress bar to show the user their progress through a series of pages filling in data. I'm sure I'd seen something similar before but I wanted to do it myself - what's more I wanted to use the type-face that I'd used for the rest of the site.
The following script can be called whatever you want but does require a few parameters in it's calling. The parameters are width
, height
and percentage
. The width and height are the dimension of the required image in px.
It does require that a typeface be discoverable - it might be best to have the typeface in the same directory as the script, at least that works for me. It's a little down and dirty and doesn't do any checking - which is should really, especially for the existance of the correct GD library and the correct parameters etc...
<?php $percentage = $_GET['percentage']; $width = $_GET['width']; $height = $_GET['height']; $progress = imagecreate($width, $height); imageantialias($my_img, true); $black = imagecolorallocate($progress, 0, 0, 0); $white = imagecolorallocate($progress, 255, 255, 255); $grey = imagecolorallocate($progress, 204, 204, 204); $lGrey = imagecolorallocate($progress, 221, 221, 221); imagefilledrectangle($progress, 0, 0, $width, $height, $black); imagefilledrectangle($progress, 1, 1, ($width - 2), ($height - 2), $white); imagefilledrectangle($progress, 1, 1, (($percentage/100) * ($width - 2)), ($height - 2), $grey); $text = $percentage." %"; $font = 'Gothicb.TTF'; $font_size = 12; $text_box = imagettfbbox($font_size, 0, $font, $text); $text_width = $text_box[2]-$text_box[0]; $text_height = $text_box[7]-$text_box[1]; $x = ($width/2) - ($text_width/2); $y = ($height/2) - ($text_height/2); imagettftext($progress, 12, 0, ($x + 1), ($y + 1), $lGrey, $font, $text); imagettftext($progress, 12, 0, $x, $y, $black, $font, $text); header("Content-type: image/png"); imagepng($progress); imagecolordeallocate($black); imagecolordeallocate($white); imagecolordeallocate($grey); imagecolordeallocate($lGrey); imagedestroy($progress); ?>
No comments:
Post a Comment