利用GD库实现图片添加搞笑文字
最近一波波刷爆朋友圈的各种结婚证,采矿证,搞笑对话,提车清单等等是怎么做的呢?对于外行来说,可能会感觉很神奇,那么今天我就长话短说给大家介绍下这种图片是怎么自动生成的。
原理说明
选取一张搞笑的图片作为模板,比如“妈妈再打我一次”,在三行空白处利用SAE中PHP的GD库,画出前台用户提交过来的搞笑段子,返回给前台浏览器进行展示。
GD库是php处理图形的扩展库,GD库提供了一系列用来处理图片的API,使用GD库可以创建图片、处理图片。在网站上GD库通常用来生成缩略图,或者用来给图片添加水印,或者用来生成验证码等。幸运的是,SAE默认是对GD库支持的,本地开发php默认是不支持GD库的,需要自己开启,开启的方式是:在本地PHP安装目录下找到php.ini文件,去掉extension=php_gd2.dll前面的分号(;)即开启对GD库的支持。
需要用到的GD库函数如下
imagecreatefromjpeg:创建一张图片
imagecolorallocate:给图片分配颜色
imagefttext:给图片在指定位置上添加文字
imagejpeg:创建格式为jpeg的图片
imagedestroy:销毁图片,释放资源
开发步骤
以“妈妈再打我一次”举例。
- 准备1张原始图片
- 原图,空白处准备写字
- 用户在浏览器中输入三句话
- 将文字提交到服务端让php页面进行处理
- 输出结果
- 服务器处理完,返回结果,将生成后的图片放回给浏览器展示。
原理很简单,下面贴一些重要的代码:
1. 前端Html
<html>
<head>
<title>请选择目标图片文字</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
.wrapper{
width: 960px;
}
.left{
margin-top: 50px;
width: 670px;
float: left;
}
.right{
width: 290px;
float: left;
}
</style>
<head>
<body>
<form action="munv.php" method="get">
<div id="wrapper" class="wrapper">
<div id="left" class="left">
<h2 align="center"><span>妈妈再打我一次图片生成器</span></h2>
<table align="center">
<tr>
<td>第一行文字</td>
<td><input type="text" name="text1" size="50"></td>
</tr>
<tr>
<td>第二行文字</td>
<td><input type="text" name="text2" size="50"></td>
</tr>
<tr>
<td>第三行文字</td>
<td><input type="text" name="text3" size="50"></td>
</tr>
<tr>
<td>操作</td>
<td>
<input type="submit" value="生成图片">
</td>
</tr>
</table>
</div>
<div id="right" class="right">
<img src="../images/munv.jpg" />
</div>
</div>
</form>
</body>
</html>
2. 服务端接受请求的php
<?php
/**
* 使用php操作GD库,完成图片生成
*/
//用面向对象的方式编程,引入类定义文件
require 'Munv.class.php';
$pic = new Munv; //实例化对象
$pic->generate(); //调用生成图片的方法
?>
3.真正实现功能的php类
<?php
/**
* 制作图片“妈妈再打我一次”的类
*/
class Munv{
//参数变量
private $text1 = ''; //文字1
private $text2 = ''; //文字2
private $text3 = ''; //文字3
/* 写php赚钱,因为php中到处都是$ :) */
private $img; //画布
private $font_file = '../images/msyhbd.ttf'; //微软雅黑粗体字体文件
/**
* 生成图片的方法
*/
public function generate(){
//1.初始化请求数据
$this->initText();
//2.创建图片画布
$this->mkImg();
//3.将文字打印到图片的固定位置
$this->addText();
//4.返回图片内容
$this->outputImg();
//5.释放画布资源
$this->destroyImg();
}
/**
* 初始化参数
*/
private function initText(){
$this->text1 = $_REQUEST['text1'];
$this->text2 = $_REQUEST['text2'];
$this->text3 = $_REQUEST['text3'];
}
/**
* 创建画布
*/
private function mkImg(){
$img_file = '../images/munv.jpg';
$this->img = imagecreatefromjpeg($img_file); //通过jpeg格式图片创建画布
}
/**
* 给图片添加文字
*/
private function addText(){
//使用imagefttext()方法添加文字
//imagefttext( resource $image , float $size , float $angle , int $x , int $y , int $color , string $fontfile , string $text)
//imagefttext(画布,字体大小,书写方向,文字基准位置x,文字基准位置y,颜色,字体文件,文本内容)
//颜色处理必须使用RGB形式表示
//颜色首先要分配到图片画布上,才能在画布上使用,利用函数imagecolorallocate来分配
//字体文件,采用微软雅黑粗体字体 msyhbd.ttf
//颜色
$text1_color = imagecolorallocate($this->img, 63, 72, 204);
$text2_color = imagecolorallocate($this->img, 63, 72, 204);
$text3_color = imagecolorallocate($this->img, 63, 72, 204);
//文字1
imagefttext($this->img, 16, 0, 50, 186, $text1_color, $this->font_file, $this->text1);
//文字2
imagefttext($this->img, 16, 0, 50, 366, $text2_color, $this->font_file, $this->text2);
//文字3
imagefttext($this->img, 16, 0, 50, 560, $text3_color, $this->font_file, $this->text3);
}
/**
* 输出图片到浏览器进行展示
*/
private function outputImg(){
//告诉浏览器已jpeg图片形式显示&不要缓存
header('Content-Type: image/jpeg');
header('Cache-control: no-chace');
//利用函数 imagejpeg() 将图片已jpeg格式进行输出
imagejpeg($this->img);
}
/**
* 释放图片资源
*/
private function destroyImg(){
//销毁图片
imagedestroy($this->img);
}
}
?>
//获取水印图片的宽高
list($src_w, $src_h) = getimagesize($src_path);
//如果水印图片本身带透明色,则使用imagecopy方法
//imagecopy($dst, $src, 10, 10, 0, 0, $src_w, $src_h);