前些天记录了一篇《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靜態圖
GIF動態圖
《成語典》中成語“情不自禁”對應的Emoji圖片:
PNG靜態圖
GIF動態圖
这也都是用PHP Imagick进行转换生成的动态GIF图片,应该还有更多高级玩法,以后有空、有需要再摸。✌