I really dare not say that I am "talking" about the GD library here, because I have only used GD once or twice, and I have not yet come into contact with most of the functions. But Sanbuzhu Xiaodiao enthusiastically asked me to write a manuscript, so I had no choice but to bite the bullet and write some of my own experiences. I hope it can serve as a starting point.
In fact, we do not necessarily have to use GD to achieve the "graph" effect in the web page. The easier solution is the histogram - which can be solved with HTML. For example:
<? $b = array(150,110,125,180,160,175,230,220); ?>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title></title>
<style>
<!--
td{ font-size:9pt }
-->
</style>
</head>
<body>
<table border=0>
<tr valign="bottom"> /* (1) */
<?for($i=0;$i<8;$i++) { ?><td align="center">
<table height="<?echo $b[$i];?>" border=0> /* (2) */
<tr>
<td bgcolor="#3F7F9F" width="40"></td> /* (3) */
</tr>
</table><br><font color="#3F7F9F"><?echo $b[$i];?></font> /* (4) */
</td><? } ?>
</tr>
</table>
</body>
</html>
<? $b = array(150,110,125,180,160,175,230,220); ?> It is a set of data. Where the data comes from has nothing to do with the overall situation. It depends on your needs; I have added a few sentences in the code. Notes, let’s explain them one by one now.
(1) What should be noted here is valign="bottom", which is to align the bottom of the cell content. Why add it in <tr>
Woolen cloth? You can make the contents of this row in the table follow this alignment without having to specify it in every <td>. This can
In this way, the original code of the HTML page resulting from PHP execution can save dozens of bytes! Save the viewer's valuable time.
(2) Attention, the most critical thing is here! <table height="xxx">, we use the height attribute of the table to
To achieve "columns" of different heights. In order to let everyone see clearly, the original data has not been scaled proportionally.
If your data is particularly large or small, it is not appropriate to directly assign it to the height attribute of the table. Instead, it should be assigned based on the situation.
The data should be scaled appropriately. For example, you estimate that each number in your set of data will be between 3000 and 8000.
You can consider shrinking them 25 times, that is, height="<? echo floor(b[$i]/25); ?>"
(3) Mention bgcolor="#xxxxxx" in this line, which is the color of the cylinder (RGB). In fact, the real histogram should be
Each cylinder uses a color. In order to keep the code as simple as possible, I used this for loop, so there is no way to give
Each cylinder is assigned a color. ——Actually, there is a way. I just don’t really need to write it for this example.
A function that extracts colors to confuse beginners. So, it’s up to you to perfect that part.
(4) Here the real data is displayed in the same color as the bars. Of course, you can also choose to put this number at the top of the cylinder
, maybe more professional. However, I am still used to putting it below.
With the help of HTML tables, we can construct various histograms. This example uses bgcolor to display color blocks.
In addition, you can also use background="(picture)". The picture is patterned, so the column of the histogram has patterns.
And if you display the real data in a very contrasting color in the <td> shown in note (3) above, it will also have a very good effect.
The above is an effective way to avoid GD, but if you want to make complex graphics, you must use GD.
Sadly, in the PHP4 Chinese manual, it is said that there are 44 functions in the GD function library, but I looked at the latest version of the English PHP4 manual,
There are already more than 80 GD functions! Since the author's English is poor, I can only make guesses when reading the English manual, so I am not sure whether the new GD library supports GIF again? Anyway, I think since we are using PHP which is completely free, why should we "risk" using a copyrighted GIF? Why not go for free and use PNG? As long as you don't need animation, PNG can also create files as small as GIF!
Next, I will combine a program and describe these commonly used GD functions one sentence at a time.
Let’s start from the beginning.
<?
Header("Content-type: image/png");
// This is sending an HTTP header to tell the browser: "Listen, this is an image, don't display it as text!"
// Due to my personal preference, I used PNG. Of course, you can also use Header("Content-type: image/gif");
// Or Header("Content-type: image/jpeg");
$im = ImageCreate (50, 100);
// Create image. Note that the image format has not been assigned when it is created.
// ImageCreate function, two parameters, no doubt, this is the width and height of the created image.
// Its return value is an int value. This value is very important. You continue to draw this image.
// Until you output this image, this value is used everywhere. Let's call it the ID of the image.
// Because the frequency of use is quite high, we assign it to a variable with a shorter name.
// Now let's draw a line. The line drawing function is like this:
// imageline (int im, int x1, int y1, int x2, int y2, int col);
// The first parameter im is the ID of the image, followed by x1, y1, x2, y2, needless to say,
// It is the coordinates of the starting point (x1, y1) and the end point (x2, y2)! (The coordinates of the upper left corner of the image are (0,0))
//What is the last parameter? It's the color! GD requires defining colors for images and using these defined colors to draw.
// Why do we need to define colors for images? My guess is that it is used as a "palette" for GIF, PNG and other images.
// This involves the knowledge of the image itself, so I won’t go into details here.
//So, before drawing the line, we have to define the color first (which is really troublesome).
// $col_red = ImageColorAllocate($im, 255,192,192);
// This function has four parameters, the first $im... do I still need to say it every time? I won’t say it next time!
//The next three parameters are the red (R), green (G), and blue (B) components of the color to be defined, ranging from 0 to 255.
// This again involves physics-optics knowledge. The different light components of the three primary colors red, green and blue,
//Produces ever-changing colors. The color I defined above is 255 red, 192 green, and 192 blue.
// If I'm not mistaken, this is a brighter red. Let's try to draw a line in a moment.
// Why wait a while? Because if a picture has only one color, nothing can be seen!
// Let’s make the background black first!
// Although it is not explicitly stated in the manual, I found that the color defined first will be used as the background by default.
$col_black = ImageColorAllocate($im, 0,0,0);
// Defines a color. There is no red light, green light, or blue light. It is naturally black - black.
// Then define the color used to draw the line:
$col_red = ImageColorAllocate($im, 255,192,192);
// Now you can start drawing red lines:
imageline ($im, 10, 20, 45, 85, $col_red);
// Don't worry, you won't be able to see the image after finishing this sentence.
ImagePNG($im);
// This sentence outputs an image. ImagePNG() outputs a png image, and ImageJPEG outputs a jpeg image.
// ImageGIF output gif image...
// Don't forget there is a parameter here, if it is displayed on the screen instead of saving to a file,
// Omit this parameter - the saved file name. If you want to save it as a file,
// It should be written like this: ImagePNG($im,"test.png");
// If no path is specified, this file is saved in the current directory of your web.
// If it is JPEG, there is one more parameter, which is JPEG quality (0~100).
// If you want to display it on the screen, ImageJPEG($im,"",80);
// If you want to save, ImageJPEG($im,"test.jpg",80);
// Note that if you want to save this image as a file,
// You cannot use Header("Content-type: image/png"); to send the HTTP header that means an image,
// Because once this happens, it means you will output an image.
ImageDestroy($im);
// Destroy the image in memory to free up memory space.
// That's it: the simplest GD drawing is done.
// Through testing, it was found that the image file generated in PNG format only has 131 bytes.
// Using JPEG format, even using the worst quality (0), requires 855 bytes, and the image quality is too bad to be viewed.
// The highest JPEG quality requires 2360 bytes, but the colors are still not as vivid as when using PNG.
// It can be seen that for this kind of image with a small number of colors, using PNG is much more cost-effective than JPEG.
?>
This time I will stop here and I will try to continue writing as soon as possible.