【實戰】惡搞圖片生成器

時間 2019-11-15

標籤實戰惡搞圖片成器简体版

原文原文鏈接

咱們要作什麼

隨着「微信朋友圈」的日益火爆，朋友圈曬圖已成爲愈來愈多的人放鬆娛樂的休閒方式。本實例咱們就來開發一個「惡搞圖片生成器」，生成一張有意思的圖片，發佈到「朋友圈」，讓你成爲「霸屏小達人」。javascript

在本實例中，咱們使用HTML5響應式設計（兼容手機），利用PHP的強大的圖形圖像處理技術——GD庫，開發一個「惡搞圖片生成器」。首頁運行效果如圖1.1所示。php

圖1.1 首頁運行效果css

部分惡搞圖片生成器效果如圖1.二、1.三、1.4和1.5所示。html

能夠這樣來思考

經過對運行效果圖的分析，不難發現，咱們主要是應用GD庫在圖片上添加文字的功能。首先，準備一張缺乏關鍵字的圖片。而後，設置一個表單，添加表單內容（即圖片中缺失的關鍵字）。最後，提交表單，將關鍵字寫在圖片的對應位置上。實現流程如圖1.5所示。java

放手去作吧！

1.3.1 首頁設計

咱們先來建立一個項目，命名爲「FunPic」。接下來，開始建立首頁index.php文件。爲實現響應式效果，咱們使用Frozen UI (https://frozenui.github.io)框架設計首頁樣式。將「光盤/01/FunPic/Public/」目錄複製到根目錄下，此時目錄結構如圖1.6所示。git

圖1.6 新增Public文件後的目錄結構github

編寫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實現二維碼圖片的關注與隱藏。app

在瀏覽器中輸入網址「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 `$width` , int `$height` )	新建一個真彩色圖像。該函數返回一個圖像標識符，表明了一幅大小爲 `x_size` 和 `y_size` 的黑色圖像。
resource imagecreatefromjpeg ( string `$filename` )	由文件或 URL 建立一個新圖象。該函數返回一圖像標識符，表明了從給定的文件名取得的圖像。
bool imagecopy ( resource `$dst_im` , resource `$src_im` , int `$dst_x` , int `$dst_y` , int `$src_x` , int `$src_y` , int `$src_w` , int `$src_h` )	拷貝圖像的一部分。將`src_im`圖像中座標從 `src_x`，`src_y` 開始，寬度爲`src_w`，高度爲`src_h`的一部分拷貝到 `dst_im` 圖像中座標爲 `dst_x` 和 `dst_y` 的位置上。
bool imagedestroy ( resource `$image` )	銷燬一圖像。該函數釋放與 `image` 關聯的內存
int imagecolorallocate ( resource `$image` , int `$red` , int `$green` , int `$blue` )	爲一幅圖像分配顏色。該函數返回一個標識符，表明了由給定的 RGB 成分組成的顏色。`red`，`green` 和 `blue` 分別是所須要的顏色的紅，綠，藍成分。
array imagettftext ( resource $image , float $size , float $angle , int $x , int $y , int $color , string $fontfile , string $text )	用TrueType字體向圖像寫入文本。具體參數請查看PHP手冊。
bool imagejpeg ( resource `$image` [, string `$filename` [, int `$quality` ]] )	輸出圖象到瀏覽器或文件。該函數從 `image` 圖像以 `filename` 爲文件名建立一個 JPEG 圖像。

說明：提交表單時，須要對用戶填寫的表單數據進行驗證，如內容是否爲空，字段格式是否正確等。因爲篇幅有限，本實例並無對錶單數據驗證。

在瀏覽器中輸入網站：「localhost/FunPic/Train/index.php」，填寫相應信息後，如圖1.11所示。點擊「肯定」按鈕，運行結果如圖1.12所示。

圖1.11 填寫表單內容圖1.12 生成圖片效果

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。