听说，PHP让文字和图片更配哦

无论是自己要在精心P过的自拍上添加个性文字，或者是摄影爱好者要在拍摄的作品里添加水印，亦或是在网页或者移动应用中实时生成文字和图片的组合，我们都需要找到一个合适且靠谱的方法来将图片和文字完美的结合在一起。对于日常照片的处理场景，通常我们的选择都是利用手机上的众多P图软件。使用它们就可以轻松便捷的实现添加文字的功能。而作为码农的我们，当某一天我们需要在编写的网页应用里添加这一功能时，我们该利用何种语言和工具来实现这一目标呢? 其实，“最好的编程语言”PHP及其GD库就给我们提供了这样一套简单且高效的解决方案。
我知道，这时候有个实例才是坠吼的~ 下面就让我来举个简单的栗子！

目标

将用户在网页应用中输入的个人信息与图片结合，生成一张印有用户信息的名片。

效果

1 预设一张图片，作为名片背景

2 用户信息输入

3 名片生成（点击Continue之后）

步骤

在一切开始之前，请使用phpinfo() command来确认GD库已安装。

首先，我们要做的事情很简单，新建一个PHP文件，就叫它main.php吧。
在main.php中，理论上我们需要以下几行代码(本代码基于CakePHP 3)：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<span class="php"><span class="hljs-preprocessor"><?php</span>
<span class="hljs-comment">//创建一个表单提供用户输入功能</span>
<span class="hljs-keyword">echo</span> <span class="hljs-variable">$this</span>->Form->create();

<span class="hljs-comment">//只保留value属性，其他属性已省略</span>
<span class="hljs-keyword">echo</span> <span class="hljs-variable">$this</span>->Form->input(
<span class="hljs-string">'First Name'</span>,[<span class="hljs-string">'value'</span> => <span class="hljs-variable">$firstname</span>, <span class="hljs-string">'...'</span> => <span class="hljs-string">'...'</span>, ...]);
<span class="hljs-keyword">echo</span> <span class="hljs-variable">$this</span>->Form->input(
<span class="hljs-string">'Last Name'</span>,[<span class="hljs-string">'value'</span> => <span class="hljs-variable">$lastname</span>, <span class="hljs-string">'...'</span> => <span class="hljs-string">'...'</span>, ...]);
<span class="hljs-keyword">echo</span> <span class="hljs-variable">$this</span>->Form->input(
<span class="hljs-string">'City'</span>,[<span class="hljs-string">'value'</span> => <span class="hljs-variable">$city</span>, <span class="hljs-string">'...'</span> => <span class="hljs-string">'...'</span>, ...]);
<span class="hljs-keyword">echo</span> <span class="hljs-variable">$this</span>->Form->input(
<span class="hljs-string">'State'</span>,[<span class="hljs-string">'value'</span> => <span class="hljs-variable">$state</span>, <span class="hljs-string">'...'</span> => <span class="hljs-string">'...'</span>, ...]);

<span class="hljs-comment">/*
* 将img标签指向一个叫做image.php的PHP文件。  
* 所有的用户输入信息将以URL的形式保存在img标签的src属性中，  
* 在表格提交后即可被image.php通过GET获取。
* 所有变量已通过PHP自带strtoupper函数转换为大写。
*/</span>
<span class="hljs-keyword">echo</span> <span class="hljs-variable">$this</span>->Html->image(<span class="hljs-string">"image.php?first="</span>.strtoupper(<span class="hljs-variable">$firstname</span>).<span class="hljs-string">"&last="</span>.strtoupper(<span class="hljs-variable">$lastname</span>).
<span class="hljs-string">"&location="</span>.strtoupper(<span class="hljs-variable">$city</span>).<span class="hljs-string">"  "</span>.strtoupper(<span class="hljs-variable">$state</span>), [<span class="hljs-string">'fullBase'</span> => <span class="hljs-keyword">true</span>]);
<span class="hljs-comment">/*
* 上面的代码相当于：
* <img src="image.php?first=名&last=姓&location=城市" />
*/</span>

<span class="hljs-comment">//表单提交</span>
<span class="hljs-keyword">echo</span> <span class="hljs-variable">$this</span>->Form->button(<span class="hljs-string">'CONTINUE'</span>, [<span class="hljs-string">'type'</span> => <span class="hljs-string">'submit'</span>]); 

<span class="hljs-comment">//关闭表单</span>
<span class="hljs-variable">$this</span>->Form->end();</span>

接下来，就是创建Where amazing happens的image.php了。包括图片设置，获取用户信息，将文字信息添加到图片上，所有的一切都将在这一步完成。让我们通过代码来一探究竟吧。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
<span class="php"><span class="hljs-preprocessor"><?php</span>
<span class="hljs-comment">// header() 函数向客户端发送原始的 HTTP 报头。</span>
header(<span class="hljs-string">'Content-type: image/jpeg'</span>);

<span class="hljs-comment">// 由文件或 URL 创建一个新图象，这里的text.jpg就是效果1显示的预设图片</span>
<span class="hljs-variable">$rImg</span> = ImageCreateFromJPEG(<span class="hljs-string">"test.jpg"</span>); 

<span class="hljs-comment">// 为一幅图像分配颜色</span>
<span class="hljs-variable">$cor</span> = imagecolorallocate(<span class="hljs-variable">$rImg</span>, <span class="hljs-number">0</span>, <span class="hljs-number">0</span>, <span class="hljs-number">0</span>);

<span class="hljs-comment">// 我们可以自定义与图片结合的文字字体</span>
<span class="hljs-variable">$font</span> = <span class="hljs-string">"./arial.ttf"</span>;

<span class="hljs-comment">// 设置最终生成图片的宽度以及文字相对于图片所在的高度</span>
<span class="hljs-variable">$imgWidthSetting</span> = <span class="hljs-number">676</span>;
<span class="hljs-variable">$textHeightOffset</span> = <span class="hljs-number">220</span>;

<span class="hljs-comment">// 解码main.php里img标签已编码的URL字符串，包括first, last以及location</span>
<span class="hljs-variable">$first</span> = urldecode(<span class="hljs-variable">$_GET</span>[<span class="hljs-string">'first'</span>]);
<span class="hljs-variable">$last</span> = urldecode(<span class="hljs-variable">$_GET</span>[<span class="hljs-string">'last'</span>]);
<span class="hljs-variable">$location</span> = urldecode(<span class="hljs-variable">$_GET</span>[<span class="hljs-string">'location'</span>]);

<span class="hljs-comment">/*
* 取得需要向图片上添加的文本的范围。imagettfbbox() 返回一个含有8个
* 单元的数组表示了文本外框的四个角。
*/</span>
<span class="hljs-variable">$width_first</span> = imagettfbbox(<span class="hljs-number">60</span>, <span class="hljs-number">0</span>, <span class="hljs-variable">$font</span>, <span class="hljs-variable">$first</span>);
<span class="hljs-variable">$width_last</span> = imagettfbbox(<span class="hljs-number">70</span>, <span class="hljs-number">0</span>, <span class="hljs-variable">$font</span>, <span class="hljs-variable">$last</span>);
<span class="hljs-variable">$width_location</span> = imagettfbbox(<span class="hljs-number">35</span>, <span class="hljs-number">0</span>, <span class="hljs-variable">$font</span>, <span class="hljs-variable">$location</span>);

<span class="hljs-comment">// 进一法取整, $width_变量[2]代表右下角X坐标位置</span>
<span class="hljs-variable">$x_first</span> = ceil(<span class="hljs-variable">$imgWidthSetting</span> - <span class="hljs-variable">$width_first</span>[<span class="hljs-number">2</span>]);
<span class="hljs-variable">$x_last</span> = ceil(<span class="hljs-variable">$imgWidthSetting</span> - <span class="hljs-variable">$width_last</span>[<span class="hljs-number">2</span>]); 
<span class="hljs-variable">$x_location</span> = ceil(<span class="hljs-variable">$imgWidthSetting</span> - <span class="hljs-variable">$width_location</span>[<span class="hljs-number">2</span>]);

<span class="hljs-comment">// 利用imagettftext()函数将文本“写入”图像</span>
imagettftext(<span class="hljs-variable">$rImg</span>, <span class="hljs-number">60</span>, <span class="hljs-number">0</span>, <span class="hljs-variable">$x_first</span>, <span class="hljs-variable">$textHeightOffset</span>+<span class="hljs-number">120</span>, <span class="hljs-variable">$cor</span>, <span class="hljs-variable">$font</span>, <span class="hljs-variable">$first</span>);
imagettftext(<span class="hljs-variable">$rImg</span>, <span class="hljs-number">70</span>, <span class="hljs-number">0</span>, <span class="hljs-variable">$x_last</span>, <span class="hljs-variable">$textHeightOffset</span>+<span class="hljs-number">210</span>, <span class="hljs-variable">$cor</span>, <span class="hljs-variable">$font</span>, <span class="hljs-variable">$last</span>);
imagettftext(<span class="hljs-variable">$rImg</span>, <span class="hljs-number">35</span>, <span class="hljs-number">0</span>, <span class="hljs-variable">$x_location</span>, <span class="hljs-variable">$textHeightOffset</span>+<span class="hljs-number">290</span>, <span class="hljs-variable">$cor</span>, <span class="hljs-variable">$font</span>, <span class="hljs-variable">$location</span>);

<span class="hljs-comment">// 输出图象到浏览器或文件，quality 为可选项，范围从 0（最差质量，文件更小）到 100（最佳质量，文件最大）</span>
imagejpeg(<span class="hljs-variable">$rImg</span>,<span class="hljs-keyword">NULL</span>,<span class="hljs-number">100</span>); 

<span class="hljs-comment">// Free up memory, imagedestroy() 释放与 image 关联的内存。</span>
imagedestroy(<span class="hljs-variable">$rImg</span>);</span>

到这里，我们就完成了通过PHP把文字添加到图片上的所有步骤。当用户输入个人信息并提交表单后，通过image.php，效果3的名片就会自动生成。

总结

利用PHP将文字与图片结合虽然简单，但可以衍生出很多不同的应用方法。譬如，我们可以将名片背景及生成的名片隐藏起来，只对用户显示信息输入界面。同时，我们在代码中接入打印机的API。这样，当用户输入完自己的信息点击继续之后，显示着用户信息的名片就会直接打印出来。这很适用于用户参加线下聚会活动check in时的场景。
总之，PHP作为“最好的编程语言”，编码不统一，性能遭诟病，语法不严谨。的确，PHP的槽点太多，足够我们黑三天三夜。但我们又必须承认，PHP及其庞大的内置函数库为网页开发者们提供了便捷且强有力的工具。你看，简单的几个函数，就可以完美实现文字与图片的结合。对于我这种还没有能力自己造轮子，sometimes还naive的小码农来说，你问我兹磁不兹磁PHP，我当然是兹磁的！