PHP繪制GIF動态圖片

By 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😀