PHP Starter » GD Library

Dynamically Converting Text to an Image

Kurtis — Thu, 05 Feb 2009 06:00:28 +0000

As CSS expands, so does web design as a whole, but where it still lacks (and most likely will always lack) is in the area of fonts. Depending on the user’s home computer and the actions he/she has taken on it, there are different fonts inherently available. In this article, however, we will talk about bypassing the user’s system and use the fonts you would like, via PHP and the GD library.

SEO experts would say using images to replace text is a bad idea because crawlers cannot read the text on images to analyze the content on your website, but this process will effectively use JavaScript to overcome that. First, we’ll talk about the basic idea of creating an image with the text using a basic GD function, imageloadfont().

You can see the file is in a strange format, but you can safely use this program to convert Windows font files to the necessary format. Using this program within the spectrum of an image created with PHP, text can be written on the image with a certain font:

You can see the image is tailored to fit the text so there is no extra whitespace. The only downside is that the ‘charwidth’ and ‘charheight’ variables have to be altered for different fonts.

With just this basic script you can turn text into an image, but how about returning to the overarching idea of dynamically turning text on a website into an image to utilize a desired font. We’ll use some simple JavaScript for that.

Note: I’m using the most basic template of an HTML file to show the idea of the script.

Text to Image Conversion

This will become an image

This won't become an image.

This will also become an image.

Referencing the PHP file we created in the JavaScript of this file will turn each ‘h2′ element into an image. As I mentioned earlier, this will not mess with most search engines, though, because the text will remain for those where JavaScript is turned off. Note, though, that that also means that users with JavaScript disabled will not see the fancy image either, just the plain text, so be sure to style it with CSS as well to insure the design of your website.

No related posts.

Editing Images – Resizing, Cropping, and more!

Kurtis — Thu, 29 Jan 2009 06:00:09 +0000

We’ve seen the graphics PHP can create for you, but how extensive is PHP’s ability to edit preexisiting images? In this article, I will explore some common functions that image editing software provides, but I’ll only use PHP. We’ll focus mainly on cropping, resizing, flipping, and adding some effects to photos.Of course there are hundreds of image editing software packages available, many for free, but there is something to be said for editing images with PHP. In fact, it just may be that working with graphics may mean utilizing internet programs to do what we typically do with programs like Photoshop.

First of all, let’s talk about cropping and resizing images as the two use the same function, just in a slightly different way. The function is imagecopyresampled().

It’s quite a doozy, but all of the parameters are self-explanatory. The variables ‘newX’ and ‘oldX’ refer to the new starting x-coordinates and old coordinate, respectively, and so on for the y-coordinates as well.

To crop an image, the idea is that we select a rectangular section of the original image and copy it to a new image. Realize that in this case the ‘oldWidth’ and ‘oldHeight’ variables refer to the selection cropped, not the entire original image. The process looks like this:

Next is the very similar resizing function. The only difference with resizing is that you don’t need to pick a certain area of the image; the entire image will be copied, simply at a different width and height.

You can see that these two ideas are very closely related, so there isn’t much difference between the two functions. Next, let’s talk about flipping images, both horizontally and vertically.

There are two new functions we’ll talk about here, one that gets the color of the image at a specified pixel, and the other sets the color of the image at a specified pixel.

The only other thing we need to talk about is the idea of rolling through each pixel, and we’ll do this using two simultaneous ‘for’ statements, one that runs through the image pixel-by-pixel horizontally, and another one that runs through each vertically at the same time. This will allow us to get and set the color of each pixel in the image.

To flip an image horizontally, the left-most pixel becomes the right-most and vice-versa. The top-most and bottom-most pixels switch when we flip vertically. The process looks like this:

Last, but not least, I’ll show you how to apply several different types of effects to an image, and this doesn’t require any special calculations, just one function, imagefilter(). You can read about all of the different filters available, but the main ones are blurring, converting to gray scale, and changing contrast/brightness.

With these GD functions in tow, there is very little you can’t do with PHP. Alright, so there’s still quite a bit that PHP can’t do with images practically, but it’s only a matter of time before programmers are able to apply even the most complex Photoshop functions to PHP.

No related posts.

Very Basic Pie Chart

Kurtis — Tue, 30 Dec 2008 06:00:06 +0000

Pie chart, circle graph, call it what you want, but these charts are loved by descriptive statisticians across the world for their instant appeal to the viewer’s eyes and inferential mind. Though descriptive statistics can be deceiving, pie charts, created in this article with the GD library, easily describe the data in a very literal way. In this post, we’ll go over the basic GD functions available for putting together a simple pie chart.

So far in the GD library series, I’ve detailed several key functions that one should certainly know before diving in to an extensive project. To review some of these functions as involved with an application, check out the series thus far.

Now that you know about declaring colors, fonts, and setting up the basics of the image, let’s get right to revealing the newest (and only new) function in this article, imagefilledarc(), declared like this:

Now, let’s break this down, as this is quite a hefty function:

$img = The image you are working with, established with something like imagecreate()
$cX, $cY = The coordinates of the pixel that will be the center of the arc, and in this case, the entire pie chart
$width, $height = Quite obviously, the width and height of the arc, meaning the pixel span horizontally and then vertically
$startDeg, $endDeg = The starting and ending point on the circle for the arc, in degrees
$col = The color to fill the arc with, as established earlier with imagecolorallocate()
$style = One of several styles available, including IMG_ARC_PIE, IMG_ARC_CHORD, IMG_ARC_NOFILL, IMG_ARC_EDGED, and in this article we’ll be focusing on IMG_ARC_PIE

With this basic understanding of the function, let’s put together a basic pie chart with everything we know. We’ll begin, as we typically do, by establishing the image and creating a blank, white canvas to work with.

Obviously, if you were putting together an accurate pie chart, you would have actual data and statistics to work with, but in this case, we’re just running through the basics, so we’ll use rather even, easy percentages. Next, we’ll create an array holding the five percentages that will define the five “slices” of the pie, and we’ll also load a font to use later with labeling. You remember how to load a font, right?

Next, we’ll put together that awesome pie (I understand if you’re starting to get hungry), and I like to use a simple for() loop. Either you can manually set the loop values if you know how many values you will have at all times, or you can make it a bit more dynamic, letting PHP do the calculations. Let’s do this slowly, simply setting up the loop and the calculations.

With just this, we are ready to create the “slices” of the pie, but I want to be sure a couple of things about the loop are made clear. First of all, if you are going to use the count() function to set the limit, establish it with the incrementing variable; otherwise, PHP will have to calculate it each time the loop is run through which demands more time and resources. Also, make sure you understand the reason for the variable before the loop. With this, we establish ‘x’ as the starting degree and set it to ’0,’ as that is where we want to start. When calculating the degrees for each element, you can actually just multiply the percentage by 3.6, but I wanted to be sure it was obvious what I was doing there. Lastly, we dynamically set a color, as we want each “slice” to be different. In reality, we could end up with two slices of the same color, but the chances are slim. Feel free to take the necessary precautions to prevent this, if you wish. Now, let’s get to the most important part, making, not baking, a pie:

Finally, we have our pie chart. We simply use the calculations we already found, along with whatever center, width, and height you wish to use to draw the pie. Then, we simply label the pie with the corresponding percentages. With a more complex script, you could easily label the pie with the actual descriptors for each “slice.” Finally, we add on the total degrees to reset the starting value for the next section. Then, output the image and your pie is ready to eat, or rather, look at.

I want to stress with this script that I titled it quite appropriately; this is a basic pie chart. There are definitely ways to make it look more appealing, certainly, but with this basic setup, you are on your way to becoming a professional statistician, except for all that fancy math behind it.

Check out a sample pie chart; enter a list of percentages (that must add up to 100; there is nothing in place to check for this) and watch your pie come to life.

No related posts.

Histograms – Remember the GD library?

Kurtis — Tue, 23 Dec 2008 06:00:36 +0000

Better recognized perhaps as “bar graphs” to most people, in the world of statistics, histograms provide a graphic representation of a set of data. This graph can be used to make inferences about the data and draw conclusions about the sample and population. In this article, we’ll dive into a few new functions available as part of the GD library that are particularly useful for this application.

As always, we will take a step-by-step approach toward handling the complicated script, and I would like to preface by saying that my “finished” code is not the best, but the use of the main functions I will discuss here is what is most important. Let’s start by setting up the image and creating the axes. The math is not too important and can be computed in many ways. Depending on the image size and spread you want, the numbers can certainly change. Just remember that the upper-left corner of the image is (0,0) and the bottom-right corner is (max,max), so adjust your coordinates accordingly. With the following code, we will analyze the set of data mathematically, determining the individual classes (which will each be represented with a bar), the frequency of each, the number of pixels on the image that will represent a frequency of ’1′ (Yscl), and the width of the image based on the number of classes there are. Then, we will draw the x and y-axes.


$max) { $max = $val; }
}
$c = ceil((($max-$min)/$numClasses));
for ($z=0; $z<$numClasses; $z++) {
$class{$z} = array((($z*$c)+$min),((($z+1)*$c)+($min-1)),0);
foreach ($x as $val) {
if (($val >= $class{$z}[0]) &amp;amp;amp;&amp;amp;amp; ($val <= $class{$z}[1])) {
$class{$z}[2]++;
}
}
}
$maxCount = 0;
for ($z = 0; $z<$numClasses; $z++) {
if ($class{$z}[2] > $maxCount) {
$maxCount = $class{$z}[2];
}
}
$Yscl = (500/$maxCount);
$width = (70+($numClasses*70));

$histogram = imagecreate($width,560);

//Defining our colors here...you remember how to do that, right?

$white = imagecolorallocate($histogram,255,255,255);
$black = imagecolorallocate($histogram,0,0,0);
$blue = imagecolorallocate($histogram,0,0,255);
imageline($histogram,50,10,50,510,$black);
imageline($histogram,50,510,$width,510,$black);

...

?>

Next, we’ll handle a quick, rather minor part, labeling the histogram using the imagestring() function. There are several functions available with the GD library, including imagefttext(), imagepstext(), and imagettftext(), so pick the one that’s best for you. An accomplice to this function, we will also use imageloadfont() to add a basic font of our own to use.

There are several specifications for the font file that you load, so I would read up on the specifications depending on the version of GD you have and what you want to accomplish. We aren’t going to add any text to the chart yet, but I’ll add that on in the following code. Finally, let’s actually get on to the most important part, creating the bars, using the imagefilledrectangle() function:

The two coordinates that are needed should be opposite corners (upper-left and bottom-right,upper-right and bottom-left, etc), though it is not important which two. As you should know by now, $image refers to the image you create and $color to a predefined color that the rectangle will be filled with. Computing the sizes of each rectangle and adding in the proper labels, here’s the additional code:



As you can see, we used the imagestring() function to label the x-axis, label each class of the histogram, and label the necessary heights on the y-axis to make it easy-to-read.
All-in-all, the code I use reads as follows, and I think you will see that with exception perhaps to adjusting the coordinates to fit with the image, it is not too complicated.

$max) { $max = $val; }
}
$c = ceil((($max-$min)/$numClasses)); //Width of each class
for ($z=0; $z<$numClasses; $z++) {
$class{$z} = array((($z*$c)+$min),((($z+1)*$c)+($min-1)),0);
foreach ($x as $val) {
if (($val >= $class{$z}[0]) &amp;amp;amp;&amp;amp;amp; ($val <= $class{$z}[1])) {
$class{$z}[2]++;
}
}
}
$maxCount = 0;
for ($z = 0; $z<$numClasses; $z++) {
if ($class{$z}[2] > $maxCount) {
$maxCount = $class{$z}[2];
}
}
$Yscl = (500/$maxCount);
$width = (70+($numClasses*70));
$histogram = imagecreate($width,560);
$white = imagecolorallocate($histogram,255,255,255);
$black = imagecolorallocate($histogram,0,0,0);
$blue = imagecolorallocate($histogram,0,0,255);
$font = imageloadfont('arial.gdf');
imageline($histogram,50,10,50,510,$black);
imageline($histogram,50,510,$width,510,$black);
imagestring($histogram,$font,(($width/2)-25),527,"Classes",$blue);
for ($z=0; $z<$numClasses; $z++) {
imagefilledrectangle($histogram,(70+(69*$z)),509,((69*$z)+120),(509-($Yscl*$class{$z}[2])),$blue);
imagestring($histogram,$font,(67+(69*$z)),511,$class{$z}[0]."-".$class{$z}[1],$black);
imagestring($histogram,$font,30,(509-($Yscl*$class{$z}[2])),$class{$z}[2],$blue);
imageline($histogram,47,(509-($Yscl*$class{$z}[2])),53,(509-($Yscl*$class{$z}[2])),$black);
}
header("Content-type: image/png");
imagepng($histogram);
imagedestroy($histogram);
?>

With this, a great-looking histogram is achieved, and the colors and text can easily be modified to combine for the look desired.  PHP and the GD library once again save the day, making it easier for statisticians to graphically represent data.
Check out my sample script, where you can enter a set of data and a number of classes (can be random) and be presented a basic histogram.
No related posts.

Scatter plots – An Application of the GD Library

Kurtis — Tue, 16 Dec 2008 06:00:44 +0000

Easily the most useful application of the GD library is the ability to dynamically output clean, sharp graphs and charts. A scatter plot, the plotting of points based on an independent variable and the dependent variable (usually X and Y), is a great application that uses several common GD functions and is useful for data analysis as well. In this post, I’ll highlight those functions while explaining the math behind using PHP to create a great scatter plot.

Because this series has been written to focus mainly on the capabilities of the GD library, I wish to stray from focusing too heavily on the mathematical aspects of creating a scatter plot, as interesting as they are in this case. Perhaps I will comment on it in the future, but for now, let us focus on the main PHP functions available to work with graphing.

Whether you use a form to input your x and y-values or obtain them from the URL parameters, the data should be handled like two lists, one containing all of the x-values and the other with the corresponding y-values in the order in which they pair up with the x-values. Believe it or not, there are only two new functions since the introductory GD library post that need to be explained, and they will be detailed now.

The first is the function to draw a line, appropriately called in the following manner:

This function is used to draw the two axes, starting with the point ($x1,$y1) extending to the point ($x2,$y2). The color should be defined previously using “imagecolorallocate,” as well as the image itself using any of the available functions. While straight integer values can be used as the coordinates, they can be obtained from calculations, either called by variables or through direct computation. This capability can make for dynamic line placement and drawing.

Let’s apply this function to our main example, the scatter plot. The main use of lines in a scatter plot is in the x and y-axes. The two axes should be placed relative to the minimum x and y values obtained from the two lists. To create the two axes, let’s do the following:


$Xmax) { $Xmax = $val; }
}
foreach ($y as $val) {
if ($val<$Ymin) { $Ymin = $val; }
if ($val>$Ymax) { $Ymax = $val; }
}
$Xmin -= 1;
$Xmax += 1;
$Ymin -= 1;
$Ymax += 1;
$Yscl = (500/($Ymax-$Ymin));
$Xscl = (500/($Xmax-$Xmin));
imageline($graph,0,round(499-($Yscl*($Ymin*-1))),500,round(499-($Yscl*($Ymin*-1))),$axes);
imageline($graph,round($Xscl*($Xmin*-1)),0,round($Xscl*($Xmin*-1)),500,$axes);

...

?>

One thing to realize with creating graphs with the GD library is that images do not work like Cartesian coordinate planes. With respect to images, the top-left corner is (0,0) and the bottom-right corner is (max,max), so complex calculations are necessary to compute the proper coordinates.

Now for the meat of the graph: the points. The second new function is used to draw the points themselves, used in the following manner:

Surely you can see that the function is used to draw an ellipse, but if the width and height are equal, a circle would be created. In the creation of a scatter plot, the center coordinates would be the representation of the x and y-values, whereas the width and height would be based either on the thickness desired or, to extend the functionality of the graph, on the frequency of that data. I suggest making it as complicated as you need; points of the same size work just fine.

To add the points to the graph, we add the following code, utilizing the aforementioned function:

The for() loop is used here so we can run through the x and y arrays at the same time to get the corresponding coordinates, and then the imagefilledellipse() function draws the points on. The width and height do not have to be 7; choose an appropriate size based on your need.

Lastly, we use the imageline() function again to draw on the line of best fit for the data, and this part is definitely optional, but for statisticians it is typically the most important. The code is as follows, calculating the beginning and ending y values and then drawing the line:

To create a great looking scatter plot, put the code all together to make something like this:

As you can see, I added a few lines to allow spacing around the plot and changed a few colors, but the main idea is the same. To check out a working example of the scatter plot, head over to the fully-functioning linear regression model and input two lists. Focus on the picture at the bottom of the middle column; that’s the great looking scatter plot we just created!

The two functions discussed in this article have a lot of potential extending to other applications as well, including pie graphs and even graphing equations of lines. The GD library, through mathematical analysis and application, can become quite a tool for mathematicians/statisticians for dynamically outputting sharp-looking representations.

No related posts.

Working with Images – Introducing the GD Library

Kurtis — Tue, 09 Dec 2008 06:00:49 +0000

There are hundreds of libraries available to add on to the PHP base, and GD is just one of those with thousands of possibilities. Used to process images and even dynamically create and output graphics, the GD library is relatively easy to learn with distinct potential in the graphics world. In this article, I will establish the basics of image-handling functions to advance later.

Nearly any computer-literate user can click the mouse a few times and create a decent image with software like Photoshop or another graphics program, but there is much potential in the uses of the PHP GD library and its ability to construct images on the fly, like charts and graphs. Additionally, it can be used in other manners, such as handling uploaded images and dynamically outputting thumbnails and edited images.

For the experimenter-at-heart, there may also be a future in image editing via the web, using PHP that is. Some websites already handle activities like this, such as SnipShot, but they do not necessarily utilize fully the possibilities PHP provides. It certainly does leave much to the imagination as to just what a programming language could do with images.

So how exactly is the GD libary used? First, you should make sure you have it instead of spending forever stressing over error messages about undefined functions. If you have PHP 4.3 or later, the GD libary was bundled with your version, so there’s no need to worry, though more libraries may be required for more image types and fonts. Still not sure if you have the GD library? Check your phpinfo by running the following function in an empty PHP file and opening it in your browser:

Searching for the “gd” section will help you determine if it is enabled or not, and once you have the library ready for use, it’s time to create a simple image. However, I suggest you first take some time to familiarize yourself with the following terms/ideas:

RGB vs. hexadecimal color values
How to manipulate RGB and hexadecimal color values (Any of the first few results work well)
Image types and their color/quality implications (e.g. JPEG, PNG, GIF, etc)

The main thing to realize with outputting an image is that the content type must be declared before the image can truley be output to the page, whether directly in the page accessed or through inclusion of a separate PHP “image” file. Below is an extremely basic image, as created with PHP, that we will analyze line-by-line to explain the main functions necessary to begin an image.

Placing the code above in a PHP file should reveal a 300px-by-300px black square, and here’s how that is achieved:

Line 2: Declare the content type of the file. The browser will read this as a PNG image. Naturally, PNG can be replaced with any supported image type (e.g. GIF, JPEG, etc)
Line 3: Create the image, and assign it to the variable ‘image.’ The values read as width, then height, in pixels.
Line 4: Allocate a color to a variable, and in this case, assign that color as the background of the image. Any and all colors used in the image must be established this way, calling the image variable first, then in RGB format, declaring the R, G, and B values.
Line 5: Output the image to the file. Depending on the image type, the function will change (e.g. images of type ‘gif’ would use imagegif(), etc)
Line 6: Destroy the memory associated with the image. In many cases, this is necessary to keep future scripts working correctly, and to free memory and prevent overloading the server with large images. Though sometimes the image will be destroyed automatically, you are better off doing it manually and being sure the space is free.

With just these few lines, a (very basic) image is created. Looking at the list of functions associated with the GD library, you can see that there is a myriad of things that can be accomplished with the library, and in the future I will detail some specific uses, but perhaps the best way to discover a new method is to experiment yourself, reading the documentation and trying out your own ideas.

No related posts.