Posted on April 27th, 2011
5280 views This is a quick tutorial to show how simple and useful it can be tocreate dynamic images with alpha channel from a PHP file. The concept issimple. We create a php file that will tell the browser it is an imagefile, ( "image/png" in this case ) instead of the regular text/htmlcontent type. Then we use some of the built in GD library functions touse a local TruType font file, along we some text we specify, and applythe font data to a new blank image. You can find more info and downloads at this link.
Step 1 Create a php file called "gd.php" and save it in a folder along with a ".ttf" font file of your choice, for example.. /fonts/gd.php /fonts/yourfont.ttf
Step 2 Add and edit this code in the gd.php file.. // Turn off PHP errors, Disable caching and set the Content-Type. error_reporting( E_NONE ); ini_set( 'display_errors', '0' ); header( "Expires: Mon, 26 Jul 1997 05:00:00 GMT" ); header( "Last-Modified: " . gmdate( "D, d M Y H:i:s" ) . " GMT" ); header( "Cache-Control: no-store, no-cache, must-revalidate" ); header( "Cache-Control: post-check=0, pre-check=0", false ); header( "Pragma: no-cache" ); header( "Content-Type: image/png" ); // Setup some custom variables for creating our font and image. $size= 48;// font size $chars= 30;// prevent really long strings $file= 'yourfont.ttf';// the text file to be used $color= array( 192, 192, 190 ); // Color[ red, green, blue ] $shade= array( 0, 0, 0, 1 );// Shadow [ red, green, blue, distance ] // Get text string that is passed to this file and clean it up. $text= ( !empty( $_GET['t'] ) ) ? trim( $_GET['t'] ) : 'PNG image'; $text= trim( strip_tags( html_entity_decode( $text ) ) ); $text= trim( preg_replace( '/ss+/', ' ', $text ) ); $text= ( strlen( $text ) > $chars ) ? substr( $text,0,$chars ).'..' : $text; // Read the TTF file and get the width and height of our font. $box= imagettfbbox( $size, 0, $file, $text ); $width= abs( $box[2] - $box[0] ) + 4; $height= abs( $box[5] - $box[3] ) + 10; // Create the blank image, alpha channel and colors. $im= imagecreatetruecolor( $width, $height ); $alpha= imagesavealpha( $im, true ); $trans= imagecolorallocatealpha( $im, 0, 0, 0, 127 ); $fill= imagefill( $im, 0, 0, $trans ); $fg= imagecolorallocate( $im, $color[0], $color[1], $color[2] ); $bg= imagecolorallocate( $im, $shade[0], $shade[1], $shade[2] ); // Finally, we add the font and the shadow to our new image. imagettftext( $im, $size, 0, $shade[3], ( $size + $shade[3] ), $bg, $file, $text ); imagettftext( $im, $size, 0, 0, $size, $fg, $file, $text ); // Output the image and do a little cleanup. imagepng( $im ); imagedestroy( $im );
Step 3 use your new PHP script as a png image for creating things like header text or anything else you like. Your fonts will be displayed the same in all browsers because it's a PNG image. :) <img src="/fonts/gd.php?t=String Here" alt="" /> <h1 style="background-image:url( '/fonts/gd.php?t=String Here' )"></h1>
Written by: Rainner Lins. |