当前位置

PHP绘制GIF动态图片

James Qi 在 2019年11月12日 - 22:50 提交

  前些天记录了一篇《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😀

GIF動態圖

GIF動圖:漢字笑轉Emoji😀

  《成語典》中成語“情不自禁”對應的Emoji圖片:

PNG靜態圖

“情不自禁”對應Emoji表情符號“💑🙅‍♂️🚲🈲”

GIF動態圖

動態圖片“情不自禁”對應Emoji表情符號“💑🙅‍♂️🚲🈲”

  这也都是用PHP Imagick进行转换生成的动态GIF图片,应该还有更多高级玩法,以后有空、有需要再摸。✌

自由标签:

添加新评论

Plain text

  • 不允许使用HTML标签。
  • 自动将网址与电子邮件地址转变为链接。
  • 自动断行和分段。