▼  Site Navigation Main Articles News Search  ▼  Anime + Manga Anime Reviews Anime Characters Gallery Screenshots Manga Reviews  ▼  Misc Links to Webcomics Bible Quotes About Older Musings
site version 7.3
PHP –– Image Processing –– part 4: Working With Text
written by: admin


Date Written: 9/12/12 Last Updated: 12/25/19

Use Custom Fonts

This is a little more tricky.  The code is a modified version of the sample code from php.net.  In order to get it to work you will need to download a custom font and upload it to your site.  finding gdf fonts has been rather difficult, however, you can use this program: http://www.wedwick.com/wftopf.exe to convert .ttf files to gdf.  (Or you could just use .ttf to begin with.)  Now, when you use the imageloadfont function, just select the location of the font file that you loaded to your site.
<?php
$im    = imagecreatetruecolor(110, 40);
$green = imagecolorallocate($im, 0, 255, 0);
$red   = imagecolorallocate($im, 255, 0, 0);
imagefilledrectangle($im, 0, 0, 90, 40, $red);
$font = imageloadfont('include/04b.gdf');
imagestring($im, $font, 0, 0, 'Hello', $green);
header('Content-type: image/jpeg');
imagejpeg($im);
imagedestroy($im);
?>

produces:  



If you use png format the image will look much sharper and without artifacts:



You should be able to figure out how to create the same image in png format, but just in case you do not:
<?php
$im    = imagecreatetruecolor(110, 40);
$green = imagecolorallocate($im, 0, 255, 0);
$red   = imagecolorallocate($im, 255, 0, 0);
imagefilledrectangle($im, 0, 0, 90, 40, $red);
$font = imageloadfont('include/04b.gdf');
imagestring($im, $font, 0, 0, 'Hello', $green);
header('Content-type: image/png');
imagepng($im);
imagedestroy($im);
?>


$green is the color of the font.  $red is the color of the background.  If a background color is not selected then the default color is black.  The background color must be drawn using imagefilledrectangle and the size will need to encompass all of the text or else you will get the little black spot as shown above.

If you want to use .ttf format you can do the following:

<?php
$im = imagecreatetruecolor(100, 25);
$red = imagecolorallocate($im, 255, 0, 0);
imagefill($im, 0, 0, $red);
$text='hello';
$font = 'ImperatorSmallCapsBold.ttf';
imagettftext($im, 20, 0, 11, 21, $grey, $font, $text);
header('Content-type: image/png');
imagepng($im);
imagedestroy($im);
?>



Image Font Width

Instead of using trial and error to get the size of the background just right you can use imagefontwidth to get the with of the font used.
<?php
$font = imageloadfont('include/04b.gdf');
echo 'Font width: ' . imagefontwidth($font);
?>

This will produce Font width: 21.  Now you can multiply this by the number of characters used and get the x dimension of the background image.  The following is an example that will automatically calculate the width needed for whatever text you want to use.

<?php
$text = 'Hello';
$width = strlen($text);
$font = imageloadfont('include/04b.gdf');
$width1 = imagefontwidth($font);
$width = $width*$width1;
$im    = imagecreatetruecolor($width, 40);
$green = imagecolorallocate($im, 0, 255, 0);
$red   = imagecolorallocate($im, 255, 0, 0);
imagefilledrectangle($im, 0, 0, $width, 40, $red);
imagestring($im, $font, 0, 0, $text, $green);
header('Content-type: image/jpeg');
imagejpeg($im);
imagedestroy($im);
?>

One possible application is to create a captcha or use it just to customize your site a bit.


Extracting a font character as an image

The following will extract a font character from a font file and output it to your browser as an image with a transparent background.
<?php
$im = imagecreatetruecolor(330, 400);
$bg = imagecolorallocate($im, 0, 0, 5);
$black = imagecolorallocate($im, 0, 0, 0);
imagefill($im, 0, 0, 5);
$text='Q';
$font = 'include/fonts/tt32l.ttf';
imagettftext($im, 300, 0, 10, 320, $black, $font, $text);
imagecolortransparent($im, $bg);
header('Content-type: image/png');
imagepng($im);
imagedestroy($im);
?>


The above will create this:





Overlaying black text on an opaque image
<style type="text/css">
.a1{
background-image:url('http://www.animeviews.com/images/screenshots/cowboybebop27.JPG');
background-repeat:no-repeat;
margin:auto 0px;
opacity:0.6;filter:alpha(opacity=60);
width:200px;position:absolute;
height:200px;
}
.a2{
width:200px;
color:#000000;
height:200px;
margin:auto 0px;
position:relative;
overflow:auto;
}
</style>
<div class='a1'></div>
<div class='a2'>blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah </div>


blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah


links

Free legal fonts



TAGS: images, php, fonts
copyright 2005–2024