Loading ...
Sorry, an error occurred while loading the content.

Advanced Image Editing Under the GD Library

Expand Messages
  • Hasin Hayder
    Advanced Image Editing Under the GD Library Brandon Mordecai Cash To start things off,
    Message 1 of 1 , Jun 1, 2005
      Advanced Image Editing Under the GD Library
      Brandon "Mordecai" Cash
      To start things off, let's assume that you are already familiar with GD, and that you have read articles such as this. If you are already familiar with GD's basic concepts and wish to move further, this is the right place for you.
      Since PHP4.3, GD has come bundled with PHP. This means often that you only have to change one line to install GD. If you do not know if GD is installed, run phpinfo() and look for GD's section; if it's there, you have it installed. If you do not have GD, open PHP.ini and remove the semicolon in the line";extension=php_gd.dll".
      GD can be used to do the simplest tasks in image editing, or some extremely advanced things. You have to bear in mind, however, that since other people are going to be viewing your script, they'll have to download it. If runtime is slow and download is even slower, your visitors aren't going to stay for long. So don't overuse GD's functions!
      Since GD can be so widely used, we must first think of a use for a dynamic image. The first thing that comes to your mind should be counters, thumbnails, and perhaps advertisements. Counters are, usually, a graphical representation of the number of visitors. Types of counters vary, however, and are not always even shown to the user. Most counters are textual, but still graphical, representations of the number of visitors. Thumbnails, as you probably know, are just shrunken versions of an image. These are used to speed up viewing of things like galleries. Users can see a picture before they have to spend time downloading the actual version. Advertisements can also be dynamic. You could use a static <img> tag to link to a PHP file, where the PHP file outputs a random image. This would be much easier than including a long script on every page that picks an image. However, these are all very simple ideas with only several GD functions. Examples of more advanced scripts include colorizing images and TTF text with effects. Colorizing images is just that - colorizing them. Colorizing just means "changing the color." This can be used for neat mouse-over effects, among other things. GD comes with only a basic TTF text utility, but you can do wonders with it, if you know how.
      Colorizing images is fairly easy to do. The easiest way to colorize an image is fairly simple to grasp. Create an image of the same dimensions and fill that image with the color you want to change it to. This new image is then placed on top of the older image, giving it a colorized look.

      function imagecolorize(&$im,& $col,$pct) {
      // Get the image's width
      $im_w imagesx($im); 
      // Get the image's height
      $im_h imagesy($im); 
      // Set a pixel with the color, so we can get it easily
      $setpixel imagesetpixel( $im,$im_w,0,$col); 
      // Get the color
      $index imagecolorat( $im,$im_w,0); 
      // Find the color in the index
      $rgb imagecolorsforindex($im, $index); 
      // Get the red value
      $r $rgb ["red"];
      // Get the green value
      $g  $rgb["green"]; 
      // Get the blue value
      $b $rgb["blue"]; 
      // Create the layover
      $layover imagecreate($im_w,$im_h ); 
      // Allocate the color on this image
      $color imagecolorallocate ($layover,$r,$g,$b ); 
      // Fill the image with the new color (this really isn't needed)
      $fill  imagefill($layover,0,0 ,$color); 
      // Merge the layover on top of the older image
      $merge imagecopymerge($im,$layover, 0,0,0,0, $im_w,$im_h,$pct);
      imagedestroy ($layover); // Destroy the layover
      If we use a blue layover RGB(0,0,255), we get this result:
      Mona Lisa Blue Mona Lisa
      Now comes the really fun part of GD--text functions. If you've familiarized yourself with the function list at php.net, I'm sure you know that there aren't many. In fact, there are only two TTF functions: imagettftext and imagettftextbbox. The former places text onto an image, while the latter returns the bounding box in pixels of the text. Earlier in this tutorial, I pointed you toward this tutorial, which hosts a very simple (but useful) script that uses a bounding box to create the image dimensions. This assures that the text fits the image perfectly.
      Since PHP has the ability to use so many image functions, you should be able to use them in combination with the TTF functions to create some interesting effects. Such examples would be outlines, textures, shadows, and translucent text.
      Perhaps the easiest text effect is shadowing. Shadowing is, quite simply, drawing text at an offset, and then drawing the original text over it. You could use translucent text to create a better shadow effect, but you haven't read about translucent text yet.

      function imagettftextshadow(&$im, $size,$angle,$x,$y ,&$col,
      $shadowcolor,$fontfile ,$text,$offsetx,$offsety
      ) {
      // Draw the shadow
      $text1 imagettftext ($im,$size,$angle, $x+$offsetx,$y+$offsety ,$shadowcolor,$fontfile,$text);
      // Draw the original text
      $text2 imagettftext($im ,$size,$angle,$x,$y ,$col,$fontfile,$text ); 
      Quite obviously, this is extremely easy to do. I'll leave it up to your imagination to wonder what shadowing looks like.
      Outlining text is also fairly simple to do. If you think about it, an outline is just drawing the text left and right, above and below the main text, then drawing the main text over it. This theoretically works with every font because it moves one pixel at a time. To create an outline, you need only know the width of the outline, then write a for loop:

      function imagettftextoutline(&$im ,$size,$angle,$x,$y ,&$col,
      $outlinecol,$fontfile ,$text,$width) {
      // For every X pixel to the left and the right
      for ($xc=$x-abs ($width);$xc<=$x+ abs($width);$xc++) { 
      // For every Y pixel to the top and the bottom
      for ($yc=$y-abs ($width);$yc<=$y+ abs($width);$yc++) { 
      // Draw the text in the outline color
      $text1 imagettftext($im, $size,$angle,$xc,$yc ,$outlinecol,$fontfile,$text ); 
      // Draw the main text
      $text2 imagettftext ($im,$size,$angle, $x,$y,$col,$fontfile ,$text); 
      By calling imagettftextoutline($img,40,0,10,50,$red,$black,"arial.ttf","AaBbCcDd",3), we get an image like this:
      ABCDEF Picture
      Translucent Text
      Translucent text is not as simple as outlining or shadowing, but it's not particularly hard. A translucent image is just something partially invisible, or clear. This is done by drawing the image onto a buffer, editing the buffer, and then merging the buffer back onto the original image.

      function imagettftexttransparent(&$im ,$size,$angle,$x,$y ,&$col,$fontfile,$text ,$pct) {
      $im_w imagesx( $im); // Get the image width
      $im_h imagesy ($im); // Get the image height
      $new imagecreate ($im_w,$im_h); // Create a buffer
      imagesetpixel($im,$im_w-1 ,0,$col); // Set a pixel down, so we can easily get the color
      $index imagecolorat($im, $im_w-1,0); // Get the color at that pixel
      $rgb imagecolorsforindex($im, $index); // Get the index of that color
      $r $rgb ["red"]; // Get the red value
      $g  $rgb["green"]; // Get the green value
      $b $rgb["blue"]; // Get the blue value
      $color imagecolorallocate($new,$r ,$g,$b); // Allocate this color on the buffer
      $copy imagecopy($new,$im ,0,0,0,0 ,$im_w,$im_h); // Copy the old image onto the buffer
      $text imagettftext($new,$size ,$angle,$x,$y,$color ,$fontfile,$text); // Draw the text
      $merge imagecopymerge($im, $new,0,0,0, 0,$im_w,$im_h,$pct ); // Copy the buffer back onto the original image
      imagedestroy($new ); // Destroy the buffer
      Anything that was on the image before stays where it was, untouched. The only difference is that text appears over the image now. This example places text over a metallic panel:
      metallic panel with text
      Textures are one of the hardest text effects possible. This is due to the fact that you need to know how to use a mask to create the texture.

      function imagettftexttexture(&$im ,&$textureim,$size,$angle, $x,$y,$fontfile,$text ) {
      $width imagesx($im);  // Get the width of the image
      $height imagesy($im ); // Get the height of the image
      $buffer imagecreate( $width,$height); // Create the buffer image
      $tile_w imagesx($textureim); // Get the width of the texture image
      $tile_h imagesy($textureim); // Get the height of the texture image
      $fits_x = (int)($im_w/$tile_w);  // Find out how many times it fits horizontally
      $fits_y = (int)($im_h/ $tile_h); // Find out how many times it fits vertically
      for ($i =0;$i<=$fits_x; $i++) { // Loop through every time (and another, for extra space) it fits horizontally
      $x = (int)( $tile_w*$i); // Change the X location based on where in the loop it is
      for ($i2=0;$i2<= $fits_y;$i2++) { // Loop through every time it fits vertically
      $y = (int)($tile_h*$i2);  // Change the Y location
      $copy imagecopy($im ,$textureim,$x,$y, 0,0,$tile_w,$tile_h ); // Copy the image to the X,Y location
      $pink  imagecolorclosest($im,255,0 ,255); // Create magic pink, a color commonly used for masks
      $trans imagecolortransparent($im,$pink);  // Make magic pink the transparent color
      imagettftext($im,$size ,$angle,$x,$y,- $pink,$fontfile,$text); // Draw text over magic pink without aliasing
      imagecopy($buffer,$im, 0,0,0,0, $width,$height); // Copy the main image onto the buffer
      imagecopy ($im,$buffer,0, 0,0,0,$width, $height); // Copy the buffer back onto the main image
      imagedestroy( $buffer); // Destroy the buffer
      This is the longest code section from this entire tutorial, all for a simple textured effect. You see this done in many graphic-editing programs, and now you know how it can be done through PHP and GD. Since we had to use very specific colors in order to get the mask to work, aliasing the text is nearly impossible; therefore, the image may appear more "crude," or choppy. If we call imagettftexttexture ($img,$texture,40,0,10,50,"arial.ttf","AaBbCcDd") where $texture contains a brick tile, we can create this image:
      ABCDEF with brick
      This concludes the advanced image editing tutorial. Hopefully, you can have some fun with advanced features in GD, and create some interesting image scripts. Thanks for sticking around!
      Every function in this tutorial (and more) can be found

      Hasin Hayder
      SomewhereIn (www.somewherein.net)
      Homepage : www.hasinme.info
      MSN : hasin_hayder@...
      Yahoo! : augustwind16@...
    Your message has been successfully submitted and would be delivered to recipients shortly.