PHP绘制GIF动态图片

由 James Qi, 2019年11月12日

　　前些天记录了一篇《PHP生成汉字转Emoji的对照图片》，在此之前都是用PHP的GD扩展实现绘图，还只能做静态的图片出来，这些天在家闭关养伤，花了很多时间来进行“國語辭典系列網站全面升級”，这期间也摸索出来PHP利用Imagick扩展来绘制GIF格式动态图片的办法，现在记录如下。

　　Imagick 是用 ImageMagic API 来创建和修改图像的PHP官方扩展，详细介绍请看《Imagick官方文档》。

　　ImageMagick® 是用来创建，编辑，合并位图图像的一套组件。它能够用于读取，转换，写入多种不同格式的图像。包含 DPX, EXR, GIF, JPEG, JPEG-2000, PDF, PhotoCD, PNG, Postscript, SVG, 和 TIFF。

　　不能不说PHP的ImageMagick的图像处理功能非常强大👍，我也只是用到其中很少一部分。安装是同事搞定的，我主要用这个来把PNG图片整合为动态GIF图片，一个例子是把汉字笔顺的PNG图片转为动态的GIF图片，繁體的台灣的“灣”字筆順原始图片如下：

　　這個灣字有25畫，所以上面一幅PNG圖片中有25個小圖片，用PHP的Imagick讀取后計算坐標，將25個小圖片都分別讀入到一個frame中，再把這25個frame組合成一個新的GIF圖，設置每幀之間的延時，就可以形成一幅動態圖片如下：

　　這樣就把以後的4808個漢字筆順PNG圖片都可以轉爲GIF動圖，有興趣的朋友可以去這裏看：✍️筆順字典📘

　　在Drupal的自定义模块中的PHP参考代码如下：

//单字PNG笔顺图转GIF动态图片
function bishun_png_gif($text) {
	// Set the content-type 
	header("Content-type: image/gif"); 
	$png_path = SOME_PATH."/4808png";
	$png_file_path = "$png_path/$text.png";//原始文件位置
	if (file_exists($png_file_path)) {
		$im = new Imagick();//创建目标文件
		$im->setFormat("gif");
		$png_image = new Imagick();//创建原始文件
		$png_image->readImage($png_file_path);//读取
		$png_width = $png_image->getImageWidth();
		$png_height = $png_image->getImageHeight();
		//132x648(555) or 66x648(4145), 62x645(98), 132x645(10)
		if ($png_width > 100) {
			$cols = 2;//列数 1或者2
		} else {
			$cols = 1;
		}
		$count = 17 * $cols;//方块计数，每列17个
		$x_start = 14;//(66-38)/2
		$y_start = 19;//(648-38*17)/2

		$y_plus = 36.2;
		for ($i = 1; $i <= $count; $i++) {//逐个笔画处理
			$frame = new Imagick();//创建新帧
			$frame->readImage($png_file_path);
			$x = $x_start;
			if ($cols == 1) {//仅一列
				$x = $x_start;
				$y = $y_start + ($i-1) * $y_plus;
			} elseif ($i <=17) {//两列的右列
				$x = $x_start + 66;
				$y = $y_start + ($i-1) * $y_plus;
			} else {//两列的左列
				$x = $x_start + (-4);
				$y = $y_start + ($i-1-17) * $y_plus;
			}
			$frame->extentImage(36,36,$x,$y);//在x,y的offset位置截取36x36大小
			$colors = $frame->getImageColors();//获取颜色数量
			if ($colors > 1) {//多种颜色，也就是有笔画
				$frame->setImageDelay(66);//设置延时
				$im->addImage($frame);//新帧加入GIF图片
			} else {//单一颜色，也就是空白
				break;//退出循环
			}
		}
		echo $im->getImagesBlob();//显示GIF图片
	}
}

　　做了这个GIF动态图后，我又做了两种与汉字转Emoji相关的PNG转GIF图，如下：

　　《國語字典》中“笑”字對應的Emoji圖片：

PNG靜態圖

漢字笑轉Emoji😀