【实战】恶搞图片生成器

谁践踏了优雅 2022-06-04 06:19 272阅读 0赞

## 我们要做什么 ##

随着“微信朋友圈”的日益火爆，朋友圈晒图已成为越来越多的人放松娱乐的休闲方式。本实例我们就来开发一个“恶搞图片生成器”，生成一张有意思的图片，发布到“朋友圈”，让你成为“霸屏小达人”。

在本实例中，我们使用HTML5响应式设计（兼容手机），利用PHP的强大的图形图像处理技术——GD库，开发一个“恶搞图片生成器”。首页运行效果如图1.1所示。

![Center][]

图1.1  首页运行效果

部分恶搞图片生成器效果如图1.2、1.3、1.4和1.5所示。

![Center 1][]![Center 2][]

### 1.2  可以这样来思考 ###

通过对运行效果图的分析，不难发现，我们主要是应用GD库在图片上添加文字的功能。首先，准备一张缺少关键字的图片。然后，设置一个表单，添加表单内容（即图片中缺失的关键字）。最后，提交表单，将关键字写在图片的对应位置上。实现流程如图1.5所示。

![Center 3][]

图1.5  实现流程

### 1.3  放手去做吧！ ###

#### 1.3.1  首页设计 ####

我们先来创建一个项目，命名为“FunPic”。接下来，开始创建首页index.php文件。为实现响应式效果，我们使用Frozen UI ([https://frozenui.github.io][https_frozenui.github.io])框架设计首页样式。将“光盘/01/FunPic/Public/”目录复制到根目录下，此时目录结构如图1.6所示。

![Center 4][]

图1.6  新增Public文件后的目录结构

编写index.php文件，具体代码如下：

<代码位置：FunPic\\index.php>

01 <!DOCTYPE html> 02 <html> 03 <head> 04 <meta charset="UTF-8" /> 05 <meta name="viewport" content="width=device-width, initial-scale=1.0, 06 minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/> 07 <title>趣味图片生成器</title> 08 <link type="text/css" rel="stylesheet" href="Public/css/frozen.css" /> 09 <link type="text/css" rel="stylesheet" href="Public/css/style.css" /> 10 </head> 11 <body> 12 <header class="ui-header ui-header-positive ui-border-b"> 13 <h1>趣味图片生成器</h1> 14 </header> 15 <div class="container" style="padding: 60px 0;"> 16 <ul class="ui-list ui-list-link ui-border-tb"> 17 <li class="ui-border-t" 18 onClick="javascript:window.location.href='Train/index.php'"> 19 <div class="ui-list-img"> 20 <span style="background-image:url(train/icon.jpg)"></span> 21 </div> 22 <div class="ui-list-info"> 23 <h4 class="ui-nowrap">火车票生成器(自定义所有信息)</h4> 24 <p class="ui-nowrap">踏上火车奔向远方</p> 25 </div> 26 </li> 27  28 </ul> 29 </div> 30 <footer class="ui-footer ui-footer-btn"> 31 <ul class="ui-tiled ui-border-t"> 32 <li class="ui-border-r"><a onClick="show()"><div>关注【明日科技】</div></a></li> 33 </ul> 34 </footer> 35 <div id="follow" class="follow"> 36 <span class="close" onClick="hide()">×</span> 37 <p>长按下方二维码图片</p> 38 <p>点选识别图中二维码</p> <img src="Public/images/qrcode.jpg"> 39 </div> 40 <script type="text/javascript"> 41 function show(){ 42 document.getElementById("follow").style.display = "block"; 43 } 44 function hide(){ 45 document.getElementById("follow").style.display = "none"; 46 } 47 </script> 48 </body> 49 </html>

上述代码中，首先在<head>标签内引入frozen.css文件，然后使用<ul>标签下的<li>标签分别包含每一个模块，最后使用JavaScript实现二维码图片的关注与隐藏。

在浏览器中输入网址“localhost/FunPic/index.php”，首页运行效果如图1.\*所示。点击“关注”按钮，运行效果如图1.7所示。

![Center 5][]

图1.7  首页效果                                                                         图1.8  关注二维码页面效果

说明：首页中每个模块之间是并列关系，由于并没有编写单个模块代码，所以首页并没有显示模块图片。

#### 1.3.2  创建头部和底部文件 ####

由于每个模块的<head>标签和<footer>标签内容相同，为减少代码量，我们可以将公共部分写入一个Common目录下。然后，在每个模块中分别引入即可。将“光盘/FunPic/Common/”目录导入到根目录下，此时目录结构如图1.9所示。

![Center 6][]

图1.9  导入Common文件夹后的目录结构

#### 1.3.3  创建表单页面 ####

下面我们开始编写“火车票生成器”的表单页面。具体步骤如下所示。

（1）在根目录下创建Train文件夹，作为“火车票生成器”模块。然后，将“光盘/Train/”目录下的图片资源“icon.png”和“old\_picture.jpg”拷贝到Train目录下。

（2）在Train目录下创建edit\_form.html表单页面，表单内容包括“起点站”、“终点站”、“车次”、“价格”、“姓名”和“身份证号”。具体代码如下：

<代码位置：FunPic\\Train\\edit\_form.html>

01 <header class="ui-header ui-header-positive ui-border-b"> 02 <h1>火车票生成器（自定义所有信息）</h1> 03 </header> 04 <div class="wrapper"> 05 <img src="icon.jpg" width="50%" style="margin:80px 25% 80px 25%;"/> 06 <div class="ui-form"> 07 <form action=""> 08 <div class="ui-form-item ui-border-b"> 09 <label>起点站</label> 10 <input type="text" name="start" placeholder="如广州"> 11 </div> 12 <div class="ui-form-item ui-border-b"> 13 <label>终点站</label> 14 <input type="text" name="end" placeholder="如北京 上海 杭州"> 15 </div> 16 <div class="ui-form-item ui-border-b"> 17 <label>车次</label> 18 <input type="text" name="train_num" placeholder="如1314"> 19 </div> 20 <div class="ui-form-item ui-border-b"> 21 <label>价格</label> 22 <input type="text" name="price" placeholder="如500"> 23 </div> 24 <div class="ui-form-item ui-border-b"> 25 <label>姓名</label> 26 <input type="text" name="name" placeholder="如某某某"> 27 </div> 28 <div class="ui-form-item ui-border-b"> 29 <label>身份证号</label> 30 <input type="text" name="id_cards" placeholder="如44092319****303011"> 31 </div> 32 <div class="ui-btn-wrap"> 33 <button class="ui-btn-lg ui-btn-primary">确定</button> 34 </div> 35 </form> 36 </div> 37 </div>

（3）在Train目录下创建index.php文件，作为“火车票生成器”的入口文件。通过访问该文件，即可访问表单页面，具体代码如下：

<代码位置：FunPic\\Train\\index.php>

01 <?php 02 include '../Common/header.html'; // 引入头部 03 include 'edit_form.html'; // 引入表单 04 include '../Common/footer.html'; // 引入底部 05 ?>

在浏览器中输入网址：“localhost/FunPic/Train/index.php”，运行结果如图1.10所示。

![Center 7][]

图1.10  火车票生成器表单页面

#### 1.3.4  提交表单 ####

当我们单击“确定”按钮，即可提交Form表单，在1.3.3节edit\_form.html代码中，Form表单的“action”属性为空，默认提交到当前文件，即“localhost/FunPic/Train/index.php”文件。Form表单的“method”属性默认为GET方式提交。所以在index.php文件中，可以使用$\_GET全局变量来接收表单提交的内容。下面就修改“localhost/FunPic/Train/index.php”文件，修改后代码如下：

<代码位置：FunPic\\Train\\index.php>

01 <?php 02 include '../Common/header.html'; // 引入头部 03 if(isset($_GET['name'])){ // 如果用户已经输入信息，拼接生成图片 04 $url = "create.php?start=".$_GET['start']."&end=".$_GET['end'] 05 ."&train_num=".$_GET['train_num']."&price=".$_GET['price'] 06 ."&name=".$_GET['name']."&id_cards=".$_GET['id_cards']; 07 include 'create_picture.html'; // 引入生成图片页面 08 }else{ 09 include 'edit_form.html'; // 引入填写表单页面 10 } 11 include '../Common/footer.html'; // 引入底部 12 ?>

上述代码中，isset()函数判断$name值是否存在，如果存在，则表示用户提交了Form表单，然后使用$\_GET接收提交的内容，拼接成$url，并引入create\_picture.html文件。否则，只显示表单页面，与1.3.3节效果相同。

#### 1.3.5  生成图片 ####

接下来编写create\_picture.html文件，生成我们需要的图片。create\_picture.html具体代码如下：

<代码位置：FunPic\\Train\\create\_picture.html>

01 <body> 02 <header class="ui-header ui-header-positive ui-border-b"> 03 <i class="ui-icon-return" οnclick="history.back()"></i> 04 <h1>长按下方图片点选保存图片</h1> 05 </header> 06 <div class="wrapper"> 07 <img src="<?php echo $url ?>" width="100%"/> 08 </div>

上述代码中，为< img >标签的src属性赋值$url。$url的值为：

$url = "create.php?start=".$_GET['start']."&end=".$_GET['end']."&train_num=".$_GET['train_num'] ."&price=".$_GET['price']."&name=".$_GET['name']."&id_cards=".$_GET['id_cards'];

即通过create.php文件来生成图片，并且传递相应参数。create.php文件具体代码如下：

<代码位置：FunPic\\Train\\create.php>

01 	<?php
    02 	    header("content-type:image/jpeg");			  	// 设置文件类型
    03 	    /* 接收表单字段 */ 
    04 	    $start = $_GET['start']?$_GET['start']:"长春";
    05 	    $end   = $_GET['end']?$_GET['end']:"北京";
    06 	    $train_num = $_GET['train_num'];
    07 	    $price = $_GET['price'];
    08 	    $name  = $_GET['name']?$_GET['name']:"明日科技";
    09 	    $id_cards = $_GET['id_cards'];
    10 	
    11 	    $im = imagecreatetruecolor(379, 234);           	// 设置画布
    12 	    $bg = imagecreatefromjpeg('old_picture.jpg');   	// 设置背景图片
    13 	    imagecopy($im,$bg,0,0,0,0,379,234);             	// 将背景图片拷贝到画布相应位置
    14 	    imagedestroy($bg);                              	// 销毁背景图片
    15 	    $font = '../Public/font/fh.ttf';                	// 设置字体
    16 	    $blacka = imagecolorallocate($im, 15, 23, 25);  	// 为图片分配颜色
    17 	    /* 写入内容 */
    18 	    imagettftext($im, 15, 0, 65, 47, $blacka, $font, $start);       // 写入起点
    19 	    imagettftext($im, 15, 0, 268, 47, $blacka, $font, $end);        // 写入终点
    20 	    imagettftext($im, 15, 0, 166, 47, $blacka, $font, $train_num);  // 写入车次
    21 	    imagettftext($im, 13, 0, 44, 101, $blacka, $font, $price);      // 写入价格
    22 	    imagettftext($im, 13, 0, 200, 150, $blacka, $font, $name);      // 写入姓名
    23 	    imagettftext($im, 13, 0, 19, 150, $blacka, $font, $id_cards);   // 写入身份证号
    24 	    /* 获取当前时间 */
    25 	    $time_y=date("Y");
    26 	    $time_m=date("m");
    27 	    $time_d=date("d");
    28 	    $time_h=date("h:s");
    29 	    /* 写入时间 */
    30 	    imagettftext($im, 9, 0, 28, 83, $blacka, $font, $time_y);   // 写入年份
    31 	    imagettftext($im, 9, 0, 72, 83, $blacka, $font, $time_m);   // 写入月份
    32 	    imagettftext($im, 9, 0, 109, 83, $blacka, $font, $time_d);  // 写入日期
    33 	    imagettftext($im, 9, 0, 143, 83, $blacka, $font, $time_h);  // 写入时辰
    34 	    imagejpeg($im);     // 生成jpeg格式图片
    35 	    imagedestroy($im);  // 销毁图片
    36 	?>

上述代码中使用的GD库函数及参数说明如表1.1所示。

表1.1  GD库部分函数及参数说明

<table> 
 <tbody> 
  <tr> 
   <td style="background:#C6D9F1"> <p>函数名</p> </td> 
   <td style="background:#C6D9F1"> <p>说明</p> </td> 
  </tr> 
  <tr> 
   <td> <p>resource <strong>imagecreatetruecolor</strong> ( int <code>$width</code> , int <code>$height</code> )</p> </td> 
   <td> <p>新建一个真彩色图像。该函数返回一个图像标识符，代表了一幅大小为 <code>x_size</code> 和 <code>y_size</code> 的黑色图像。</p> </td> 
  </tr> 
  <tr> 
   <td> <p>resource <strong>imagecreatefromjpeg</strong> ( string <code>$filename</code> )</p> </td> 
   <td> <p>由文件或 URL 创建一个新图象。该函数返回一图像标识符，代表了从给定的文件名取得的图像。</p> </td> 
  </tr> 
  <tr> 
   <td> <p>bool <strong>imagecopy</strong> ( resource <code>$dst_im</code> , resource <code> $src_im</code> , int <code>$dst_x</code> , int <code>$dst_y</code> , int <code>$src_x</code> , int <code>$src_y</code> , int <code>$src_w</code> , int <code>$src_h</code> )</p> </td> 
   <td> <p>拷贝图像的一部分。将<code>src_im</code>图像中坐标从 <code>src_x</code>，<code>src_y </code>开始，宽度为<code>src_w</code>，高度为<code>src_h</code>的一部分拷贝到 <code>dst_im</code> 图像中坐标为 <code>dst_x</code> 和 <code>dst_y</code> 的位置上。</p> </td> 
  </tr> 
  <tr> 
   <td> <p>bool <strong>imagedestroy</strong> ( resource <code>$image</code> )</p> </td> 
   <td> <p>销毁一图像。<strong>该函数</strong>释放与 <code>image</code> 关联的内存</p> </td> 
  </tr> 
  <tr> 
   <td> <p>int <strong>imagecolorallocate</strong> ( resource <code>$image</code> , int <code> $red</code> , int <code>$green</code> , int <code>$blue</code> )</p> </td> 
   <td> <p>为一幅图像分配颜色。该函数返回一个标识符，代表了由给定的 RGB 成分组成的颜色。<code>red</code>，<code>green</code> 和 <code>blue</code> 分别是所需要的颜色的红，绿，蓝成分。</p> </td> 
  </tr> 
  <tr> 
   <td> <p>array imagettftext ( resource $image , float $size , float $angle , int $x , int $y , int $color , string $fontfile , string $text )</p> </td> 
   <td> <p>用TrueType字体向图像写入文本。具体参数请查看PHP手册。</p> </td> 
  </tr> 
  <tr> 
   <td> <p>bool <strong>imagejpeg</strong> ( resource <code>$image</code> [, string <code> $filename</code> [, int <code>$quality</code> ]] )</p> </td> 
   <td> <p>输出图象到浏览器或文件。该函数从 <code>image</code> 图像以 <code>filename</code> 为文件名创建一个  JPEG 图像。</p> </td> 
  </tr> 
 </tbody> 
</table>

说明：提交表单时，需要对用户填写的表单数据进行验证，如内容是否为空，字段格式是否正确等。由于篇幅有限，本实例并没有对表单数据验证。

在浏览器中输入网站：“localhost/FunPic/Train/index.php”，填写相应信息后，如图1.11所示。点击“确定”按钮，运行结果如图1.12所示。

![Center 8][]

[Center]: /images/20220604/345efbfef73d4359be206c4be175eab3.png
[Center 1]: https://img-blog.csdn.net/20171206145047914?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvSkFWQWJjY2Q=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center
[Center 2]: /images/20220604/c99dd0b3af4849f6b9becb5c70d71956.png
[Center 3]: /images/20220604/418856dde54b4b5cab4578526dc9b407.png
[https_frozenui.github.io]: https://frozenui.github.io/
[Center 4]: /images/20220604/74c5fdd0a1ec410983c985b1a5565739.png
[Center 5]: /images/20220604/7e6491ea57de4d5cb6dd7498c79e59d0.png
[Center 6]: /images/20220604/a5a6296dc06b45d79cbcbb6fb4cde064.png
[Center 7]: /images/20220604/5b76619fe6e04915ad2b0d356cb46238.png
[Center 8]: /images/20220604/43cec81396c04adab611b63ad6e0851a.png