三沣开发知识 购物 网址 游戏 小说 歌词 地图 快照 股票 美女 新闻 笑话 | 汉字 软件 日历 阅读 下载 图书馆 开发 租车 短信 China
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
图片批量下载器
↓批量下载图片,美女图库↓
多播视频美女直播
↓电视,电影,美女直播,迅雷资源↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
vbs/VBScript DOS/BAT hta htc python perl 游戏相关 VBA 远程脚本 ColdFusion ruby专题
autoit seraphzone PowerShell linux shell Lua Golang Erlang 其它教程 CSS/HTML/Xhtml
html5 CSS XML/XSLT Dreamweaver教程 经验交流 开发者乐园 Android开发资料
站长资讯 .NET新手 ASP.NET C# WinForm Silverlight WCF CLR WPF XNA VisualStudio ASP.NET-MVC .NET控件开发 EntityFramework WinRT-Metro Java C++ PHP Delphi Python Ruby C语言 Erlang Go Swift Scala R语言 Verilog 其它语言 架构设计 面向对象 设计模式 领域驱动 Html-Css JavaScript jQuery HTML5 SharePoint GIS技术 SAP OracleERP DynamicsCRM K2 BPM 信息安全 企业信息 Android开发 iOS开发 WindowsPhone WindowsMobile 其他手机 敏捷开发 项目管理 软件工程 SQLServer Oracle MySQL NoSQL 其它数据库 Windows7 WindowsServer Linux
  IT知识库 -> PHP -> 【实战】恶搞图片生成器 -> 正文阅读
 

[PHP]【实战】恶搞图片生成器

【实战】恶搞图片生成器 我们要做什么
随着“微信朋友圈”的日益火爆,朋友圈晒图已成为越来越多的人放松娱乐的休闲方式。本实例我们就来开发一个“恶搞图片生成器”,生成一张有意思的图片,发布到“朋友圈”,让你成为“霸屏小达人”。
在本实例中,我们使用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 $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  生成图片效果
  PHP 最新文章
PHP中被忽略的性能优化利器:生成器
cakephp搭建配置完成后怎么关闭cake标识
如何配置php session使用redis集群
cakephp怎么默认显示index/index文件
PHP入门怎么选?大学生适合学习吗?
php 回调函数和匿名函数
工厂模式
PHP安装、配置及拓展总结
谈谈php中上传文件的处理
【PHP开发】国外程序员收集整理的 PHP 资源
上一篇文章      下一篇文章      查看所有文章
加:2017-12-06 23:25:31  更:2017-12-06 23:25:36 
 
技术频道: 站长资讯 .NET新手区 ASP.NET C# WinForm Silverlight WCF CLR WPF XNA Visual Studio ASP.NET MVC .NET控件开发 Entity Framework WinRT/Metro Java C++ PHP Delphi Python Ruby C语言 Erlang Go Swift Scala R语言 Verilog 其它语言 架构设计 面向对象 设计模式 领域驱动设计 Html/Css JavaScript jQuery HTML5 SharePoint GIS技术 SAP Oracle ERP Dynamics CRM K2 BPM 信息安全 企业信息化其他 Android开发 iOS开发 Windows Phone Windows Mobile 其他手机开发 敏捷开发 项目与团队管理 软件工程其他 SQL Server Oracle MySQL NoSQL 其它数据库 Windows 7 Windows Server Linux
脚本语言: vbs/VBScript DOS/BAT hta htc python perl 游戏相关 VBA 远程脚本 ColdFusion ruby专题 autoit seraphzone PowerShell linux shell Lua Golang Erlang 其它教程
网站开发: CSS/HTML/Xhtml html5 CSS XML/XSLT Dreamweaver教程 经验交流 开发者乐园 Android开发资料
360图书馆 软件开发资料 文字转语音 购物精选 软件下载 美食菜谱 新闻资讯 电影视频 小游戏 Chinese Culture 股票 租车
生肖星座 三丰软件 视频 开发 短信 中国文化 网文精选 搜图网 美图 阅读网 多播 租车 短信 看图 日历 万年历 2017年12日历
2017-12-17 18:03:00
多播视频美女直播
↓电视,电影,美女直播,迅雷资源↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  IT知识库