12.3 图形图像的典型应用

12.3 图形图像的典型应用

视频讲解：光盘TMlx12图形图像的典型应用．exe

网页中如果没有丰富多彩的图形图像总是缺少生气，漂亮的图形图像能让整个网页看起来更富有吸引力，使许多文字难以表达的思想一目了然，并且可以清晰地表达出数据之间的关系。下面对图形图像处理的各种技术进行讲解。

12.3.1 创建一个简单的图像

使用GD2函数库可以实现各种图形图像的处理。创建画布是使用GD2函数库来创建图像的第一步，无论创建什么样的图像，首先都需要创建一个画布，其他操作都将在这个画布上完成。在GD2函数库中创建画布，可以通过imagecreate()函数实现。

【例12.1】使用imagecreate()函数创建一个宽200像素、高60像素的画布，并且设置画布背景颜色RGB值为（30,30,30），最后输出一个GIF格式的图像。实例代码如下：（实例位置：光盘TMsl121）

<?php $im=imagecreate(200,60); //创建一个画布 $white=imagecolorallocate($im,30,30,30); //设置画布的背景颜色为灰色 imagegif($im); //输出图像 ?>

图12.3 创建一个简单的图像

在上面的代码中，主要使用imagecreate()函数创建一个基于普通调色板的画布，通常支持256色，其中200和60分别为图像的宽度和高度，单位为像素（pixel）。

运行结果如图12.3所示。

12.3.2 使用GD2函数在照片上添加文字

PHP中的GD库支持中文，但必须要以UTF-8格式的参数来进行传递，如果使用imageString()函数直接绘制中文字符串就会显示乱码，这是因为GD2对中文只能接收UTF-8编码格式，并且默认使用英文字体，所以要输出中文字符串，必须对中文字符串进行转码，并设置中文字符使用的字体。否则，输出的只能是乱码。

【例12.2】使用imageTTFText()函数将文字“长白山天池”以TTF（True Type Fonts）字体输出到图像中。（实例位置：光盘TMsl122）

程序开发步骤如下：

（1）通过header()函数定义输出图像类型。

（2）通过imagecreatefromjpeg()函数载入照片。

（3）通过imagecolorallocate()设置输出字体颜色。

（4）定义输出的中文字符串所使用的字条。

（5）通过iconv()函数对输出的中文字符串的编码格式进行转换。

（6）通过imageTTFText()函数向照片中添加文字。

（7）创建图像，并释放资源。

代码如下：

<?php header("content-type:image/jpeg"); //定义输出为图像类型 $im=imagecreatefromjpeg("images/photo.jpg"); //载入照片 $textcolor=imagecolorallocate($im,56,73,136); //设置字体颜色为蓝色，值为RGB颜色值 $fnt="c:/windows/fonts/simhei.ttf"; //定义字体 $motto=iconv("gb2312", "utf-8", "长白山天池"); //定义输出字体串 imageTTFText($im,220,0,480,340, $textcolor, $fnt, $motto); //写TTF文字到图中 imagejpeg($im); //建立JPEG图形 imagedestroy($im); //结束图形，释放内存空间 ?>

在上面的代码中，主要使用imageTTFText()函数输出文字到照片中。其中，$im指照片，220是字体的大小，0是文字的水平方向，480、340是文字的坐标值，$textcolor是文字的颜色，$fnt是字体，$motto是照片文字。

本例运行前后的效果如图12.4和图12.5所示。

图12.4 照片原图

图12.5 添加文字后的照片

技巧

应用该方法还可以制作电子相册。

12.3.3 使用图像处理技术生成验证码

验证码功能的实现方法很多，有数字验证码、图形验证码和文字验证码等。在本节中介绍一种使用图像处理技术生成的验证码。

【例12.3】使用图像处理技术生成验证码。（实例位置：光盘TMsl123）

程序的开发步骤如下：

（1）创建一个checks.php文件，在该文件中使用GD2函数创建一个4位的验证码，并且将生成的验证码保存在Session变量中，代码如下：

<?php session_start(); //初始化Session变量 header("content-type:image/png"); //设置创建图像的格式 $image_width=70; //设置图像宽度 $image_height=18; //设置图像高度 srand(microtime()＊100000); //设置随机数的种子 $new_number=""; //初始化变量 for($i=0; $i<4; $i++){ //循环输出一个4位的随机数 $new_number.=dechex(rand(0,15)); } $ SESSlON['check checks']=$new number; //将获取的随机数验证码写入Session变量中 $num_image=imagecreate($image_width, $image_height); `//创建一个画布 imagecolorallocate($num_image,255,255,255); //设置画布的颜色 for($i=0; $i<strlen($_SESSION['check_checks']); $i++){ //循环读取Session变量中的验证码 $font=mt_rand(3,5); //设置随机的字体 $x=mt_rand(1,8)+$image_width＊$i/4; //设置随机字符所在位置的X坐标 $y=mt_rand(1, $image_height/4); //设置随机字符所在位置的Y坐标 $color=imagecolorallocate($num_image, mt_rand(0,100), mt_rand(0,150), mt_rand(0,200)); //设置字符的颜色 imagestring($num_image, $font, $x, $y, $_SESSION['check_checks'][$i], $color); //水平输出字符 } imagepng($num_image); //生成PNG格式的图像 imagedestroy($num_image); //释放图像资源 ?>

在上面的代码中，对验证码进行输出时，每个字符的位置、颜色和字体都是通过随机数来获取的，可以在浏览器中生成各式各样的验证码，还可以防止恶意用户攻击网站系统。

（2）创建一个用户登录的表单，并调用checks.php文件，在表单页中输出图像的内容，提交表单信息，使用if条件语句判断输入的验证码是否正确。如果用户填写的验证码与随机产生的验证码相等，则提示“用户登录成功！”，代码如下：

<?php session_start(); //初始化Session if(isset($_POST["Submit"]) && $_POST["Submit"]! =""){ $checks=$_POST["checks"]; //获取验证码文本框的值 if($checks==""){ //如果验证码的值为空，则弹出提示信息 echo "<script> alert(’验证码不能为空’); window.location.href='index.php'; </script>"; } //如果用户输入验证码的值与随机生成的验证码的值相等，则弹出登录成功提示 if($checks==$ SESSlON['check checks']){ echo "<script> alert(’用户登录成功！'); window.location.href='index.php'; </script>"; }else{ //否则弹出验证码不正确的提示信息 echo "<script> alert(’您输入的验证码不正确！'); window.location.href='index.php'; </script>"; } } ?>

（3）在IE地址栏中输入地址，按Enter键，输入用户名和密码，在“验证码”文本框中输入验证码信息，单击“登录”按钮，对验证码的值进行判断，运行结果如图12.6所示。

图12.6 使用图像处理技术生成验证码

12.3.4 使用柱形图统计图书月销售量

柱形图的使用在web网站中非常广泛，它可以直观地显示数据信息，使数据对比和变化趋势一目了然，从而可以更加准确、直观地表达信息和观点。

【例12.4】使用Jpgraph类库实现柱形图统计图书月销售情况。（实例位置：光盘TMsl124）

创建柱形分析图的详细步骤如下：

（1）使用include语句引用jpgraph.php文件。

（2）采用柱形图进行统计分析，需要创建BarPlot对象，BarPlot类在jpgraph_bar.php中定义，需要使用include语句调用该文件。

（3）定义一个12个元素的数组，分别表示12个月中的图书销量。

（4）创建Graph对象，生成一个600×300像素大小的画布，设置统计图所在画布的位置以及画布的阴影、淡蓝色背景等。

（5）创建一个矩形的对象BarPlot，设置其柱形图的颜色，在柱形图上方显示图书销售数据，并格式化数据为整型。

（6）将绘制的柱形图添加到画布中。

（7）添加标题名称和X轴坐标，并分别设置其字体。

（8）输出图像。

本例的完整代码如下：

<?php include ("jpgraph/jpgraph.php"); include("jpgraph/jpgraph_bar.php"); //引用柱形图对象所在的文件 $datay=array(160,180,203,289,405,488,489,408,299,166,187,105); //定义数组 $graph=new Graph(600,300, "auto"); //创建画布 $graph->SetScale("textlin"); $graph->yaxis->scale->SetGrace(20); $graph->SetShadow(); //创建画布阴影 //设置统计图所在画布的位置，左边距40、右边距30、上边距30、下边距40，单位为像素 $graph->img->SetMargin(40,30,30,40); $bplot=new BarPlot($datay); //创建一个矩形的对象 $bplot->SetFillColor('orange'); //设置柱形图的颜色 $bplot->value->Show(); //设置显示数字 $bplot->value->SetFormat('%d'); //在柱形图中显示格式化的图书销量 $graph->Add($bplot); //将柱形图添加到图像中 $graph->SetMarginColor("lightblue"); //设置画布背景色为淡蓝色 $graph->title->Set("《PHP从入门到精通》2009年销量统计"); //创建标题 //设置X坐标轴文字 $a=array("1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"); $graph->xaxis->SetTickLabels($a); //设置X轴 $graph->title->SetFont(FF_SIMSUN); //设置标题的字体 $graph->xaxis->SetFont(FF_SIMSUN); //设置X轴的字体 $graph->Stroke(); //输出图像 ?>

本例的运行结果如图12.7所示。

图12.7 应用柱形图统计图书月销量

12.3.5 使用折线图统计图书月销售额

折线图的使用同样十分广泛，如商品的价格走势、股票在某一时间段的涨跌等，都可以使用折线图来分析。

【例12.5】使用Jpgraph类库实现折线图统计图书月销售额情况。（实例位置：光盘TMsl125）

创建折线分析图的详细步骤如下：

（1）使用include语句引用jpgraph_line.php文件。

（2）采用折线图进行统计分析，需要创建LinePlot对象，而LinePlot类在jpgraph_line.php中定义，需要应用include语句调用该文件。

（3）定义一个12个元素的数组，分别表示12个月中的图书月销售额。

（4）创建Graph对象，生成一个600×300像素大小的画布，设置统计图所在画布的位置，以及画布的阴影、淡蓝色背景等。

（5）创建一个折线图的对象BarPlot，设置其折线图的颜色。

（6）将绘制的折线图添加到画布中。

（7）添加标题名称和X轴坐标，并分别设置其字体。

（8）输出图像。

本例的完整代码如下：

<?php include ("jpgraph/jpgraph.php"); include("jpgraph/jpgraph_line.php"); //引用折线图LinePlot类文件 $datay=array(8320,9360,14956,17028,13060,15376,25428,16216,28548,18632,22724,28460); //定义数组 $graph=new Graph(600,300, "auto"); //创建画布 //设置统计图所在画布的位置，左边距50、右边距40、上边距30、下边距40，单位为像素 $graph->img->SetMargin(50,40,30,40); $graph->img->SetAntiAliasing(); //设置折线的平滑状态 $graph->SetScale("textlin"); //设置刻度样式 $graph->SetShadow(); //创建画布阴影 $graph->title->Set("2009年《PHP从入门到精通》图书月销售额折线图"); //设置标题 $graph->title->SetFont(FF_SIMSUN, FS_BOLD); //设置标题字体 $graph->SetMarginColor("lightblue"); //设置画布的背景颜色为淡蓝色 $graph->yaxis->title->SetFont(FF_SIMSUN, FS_BOLD); //设置Y轴标题的字体 $graph->xaxis->SetPos("min"); $graph->yaxis->HideZeroLabel(); $graph->ygrid->SetFill(true, '#[email protected]', '#[email protected]'); $a=array("1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"); //X轴 $graph->xaxis->SetTickLabels($a); //设置X轴 $graph->xaxis->SetFont(FF_SIMSUN); //设置X坐标轴的字体 $graph->yscale->SetGrace(20); $p1=new LinePlot($datay); //创建折线图对象 $p1->mark->SetType(MARK_FILLEDCIRCLE); //设置数据坐标点为圆形标记 $p1->mark->SetFillColor("red"); //设置填充的颜色 $p1->mark->SetWidth(4); //设置圆形标记的直径为4像素 $p1->SetColor("blue"); //设置折线颜色为蓝色 $p1->SetCenter(); //在X轴的各坐标点中心位置绘制折线 $graph->Add($p1); //在统计图上绘制折线 $graph->Stroke(); //输出图像 ?>

本例的运行结果如图12.8所示。

图12.8 应用折线图统计图书月销售额

12.3.6 使用3D饼形图统计各类商品的年销售额比率

饼形图是一种非常实用的数据分析技术，可以清晰地表达出数据之间的关系。在调查某类商品的市场占有率时，最好的显示方式就是使用饼形图，通过饼形图可以直观地看到某类产品的不同品牌在市场中的占有比例。

【例12.6】使用3D饼形图统计各类商品的年销售额比率。（实例位置：光盘TMsl126）

创建3D饼形图的详细步骤如下：

（1）使用include语句引用jpgraph_line.php文件。

（2）绘制饼形图需要引用jpgraph_pie.php文件。

（3）绘制3D效果的饼形图需要创建PiePlot3D类对象，PiePlot3D类在jpgraph_line.php中定义，需要应用inlcude语句调用该文件。

（4）定义一个6个元素的数组，分别表示6种不同的商品类别。

（5）创建Graph对象，生成一个540×260像素大小的画布，设置统计图所在画布的位置以及画布的阴影。

（6）设置标题的字体以及图例的字体。

（7）设置饼形图所在画布的位置。

（8）将绘制的3D饼形图添加到图像中。

（9）输出图像。

创建3D饼形图的程序完整代码如下：

<?php include_once ("jpgraph/jpgraph.php"); include_once ("jpgraph/jpgraph_pie.php"); include_once("jpgraph/jpgraph_pie3d.php"); //引用3D饼形图PiePlot3D对象所在的类文件 $data=array(266036,295621,335851,254256,254254,685425); //定义数组 $graph=new PieGraph(540,260, 'auto'); //创建画布 $graph->SetShadow(); //设置画布阴影 $graph->title->Set("应用3D饼形图统计2009年商品的年销售额比率"); //创建标题 $graph->title->SetFont(FF SlMSUN, FS BOLD); //设置标题字体 $graph->legend->SetFont(FF SlMSUN, FS NORMAL); //设置图例字体 $p1=new PiePlot3D($data); //创建3D饼形图对象 $p1->SetLegends(array("IT数码", "家电通讯", "家居日用", "服装鞋帽", "健康美容", "食品烟酒")); $targ=array("pie3d_csimex1.php? v=1", "pie3d_csimex1.php? v=2", "pie3d_csimex1.php? v=3", "pie3d_csimex1.php? v=4", "pie3d_csimex1.php? v=5", "pie3d_csimex1.php? v=6"); $alts=array("val=%d", "val=%d", "val=%d", "val=%d", "val=%d", "val=%d"); $p1->SetCSIMTargets($targ, $alts); $p1->SetCenter(0.4,0.5); //设置饼形图所在画布的位置 $graph->Add($p1); //将3D饼形图添加到图像中 $graph->StrokeCSIM(); //输出图像到浏览器 ?>

代码的加粗部分是需要特别注意的地方，这两行代码分别用于设置标题的字体以及图例的字体。本实例的运行结果如图12.9所示。

图12.9 应用3D饼形图统计2009年各类商品的年销售额比率