我們要做什么
隨着“微信朋友圈”的日益火爆，朋友圈曬圖已成為越來越多的人放松娛樂的休閑方式。本實例我們就來開發一個“惡搞圖片生成器”，生成一張有意思的圖片，發布到“朋友圈”，讓你成為“霸屏小達人”。
在本實例中，我們使用HTML5響應式設計（兼容手機），利用PHP的強大的圖形圖像處理技術——GD庫，開發一個“惡搞圖片生成器”。首頁運行效果如圖1.1所示。
圖1.1 首頁運行效果
部分惡搞圖片生成器效果如圖1.2、1.3、1.4和1.5所示。
可以這樣來思考
通過對運行效果圖的分析，不難發現，我們主要是應用GD庫在圖片上添加文字的功能。首先，准備一張缺少關鍵字的圖片。然后，設置一個表單，添加表單內容（即圖片中缺失的關鍵字）。最后，提交表單，將關鍵字寫在圖片的對應位置上。實現流程如圖1.5所示。
放手去做吧！
1.3.1 首頁設計
我們先來創建一個項目，命名為“FunPic”。接下來，開始創建首頁index.php文件。為實現響應式效果，我們使用Frozen UI (https://frozenui.github.io)框架設計首頁樣式。將“光盤/01/FunPic/Public/”目錄復制到根目錄下，此時目錄結構如圖1.6所示。
圖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所示。
圖1.7 首頁效果 圖1.8 關注二維碼頁面效果
說明：首頁中每個模塊之間是並列關系，由於並沒有編寫單個模塊代碼，所以首頁並沒有顯示模塊圖片。
1.3.2 創建頭部和底部文件
由於每個模塊的<head>標簽和<footer>標簽內容相同，為減少代碼量，我們可以將公共部分寫入一個Common目錄下。然后，在每個模塊中分別引入即可。將“光盤/FunPic/Common/”目錄導入到根目錄下，此時目錄結構如圖1.9所示。
圖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所示。
圖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" onclick="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庫部分函數及參數說明
| 函數名 |
說明 |
| resource imagecreatetruecolor ( int |
新建一個真彩色圖像。該函數返回一個圖像標識符，代表了一幅大小為 |
| resource imagecreatefromjpeg ( string |
由文件或 URL 創建一個新圖象。該函數返回一圖像標識符，代表了從給定的文件名取得的圖像。 |
| bool imagecopy ( resource |
拷貝圖像的一部分。將 |
| bool imagedestroy ( resource |
銷毀一圖像。該函數釋放與 |
| int imagecolorallocate ( resource |
為一幅圖像分配顏色。該函數返回一個標識符，代表了由給定的 RGB 成分組成的顏色。 |
| array imagettftext ( resource $image , float $size , float $angle , int $x , int $y , int $color , string $fontfile , string $text ) |
用TrueType字體向圖像寫入文本。具體參數請查看PHP手冊。 |
| bool imagejpeg ( resource |
輸出圖象到瀏覽器或文件。該函數從 |
說明：提交表單時，需要對用戶填寫的表單數據進行驗證，如內容是否為空，字段格式是否正確等。由於篇幅有限，本實例並沒有對表單數據驗證。
在瀏覽器中輸入網站：“localhost/FunPic/Train/index.php”，填寫相應信息后，如圖1.11所示。點擊“確定”按鈕，運行結果如圖1.12所示。
圖1.11 填寫表單內容 圖1.12 生成圖片效果