windows10にphpとimagemagickを入れてSVGをアニメーションGIFにする

何年か前に windowsで ImageMagick をPHPで使おうとして、
なかなかうまくいかなかったこともあって、
今回必要に迫られて、まとめてみました。

まず、phpをダウンロードします。

windows php download
現時点では 7.1.4 が最新でした。
私のPCは64bit CPUですので、VC14 x64 Thread Safeをダウンロードしました。
php-7.1.4-Win32-VC14-x64.zip

ダウンロードした zip を展開します。

場所は自由に決めていいです。
私は C:\bin\php-7.1.4-Win32-VC14-x64 に置きました。

起動してみます。

C:\bin\php-7.1.4-Win32-VC14-x64\index.php ファイルを以下の内容で作成し、

index.php

<?php phpinfo();

コマンドプロンプトで

コマンドプロンプト

> CD /D C:\bin\php-7.1.4-Win32-VC14-x64
> php -S 127.0.0.1:80

を実行します。

ブラウザで http://localhost/ にアクセスして以下の画面が表示されればphp葉動作しています。

80番ポートが使えない場合は8888などに変えてみてください。

8888番ポート使用時のコマンド

php -S 127.0.0.1:8888

http://localhost:8888/ で確認

次に imagemagick をダウンロードします。

imagemagickはphpのDLL(windows用)とimagemagickランタイムの両方が必要です。

まずは DLL を以下からダウンロードします。
php_imagick-3.4.3-7.1-ts-vc14-x64.zip
ファイル名の tsはThread Safeのことで vc14, x64 の文字と合わせて php と一致するものをダウンロードしてください。

ダウンロードした zip 内の php_imagick.dll を C:\bin\php-7.1.4-Win32-VC14-x64\ext に置きます。

このDLLをPHPから使用するようPHPの設定ファイルを次の内容で C:\bin\php-7.1.4-Win32-VC14-x64\php.ini に作ります。

php.ini

extension_dir="ext"
extension=php_imagick.dll

次に imagemagickランタイムを以下からダウンロードします。
ImageMagick-6.9.3-7-vc14-x64.zip
これも x14, x64 をPHPに合わせてダウンロードしてください。

ダウンロードした zip ファイルを C:\bin\ImageMagick-6.9.3-7-vc14-x64.zip に展開します。

そして、ランタイムをどこでも実行できるようPATH環境変数を設定します。

コマンドプロンプト

set MAGICK_HOME=C:\bin\ImageMagick-6.9.3-7-vc14-x64\bin
set PATH=%PATH%;C:\bin\ImageMagick-6.9.3-7-vc14-x64\bin;
setx MAGICK_HOME "C:\bin\ImageMagick-6.9.3-7-vc14-x64\bin" /M
setx PATH "%PATH%;C:\bin\ImageMagick-6.9.3-7-vc14-x64\bin;" /M

set は現在のプロンプトに設定を反映し、 setxはPC全体に設定を反映します。
(setxの実行には管理者権限が必要です。)

これで PHP から imagemagick を使う準備ができました。
もう一度 php で HTTPサーバを起動し、設定内容を確認してみます。

コマンドプロンプト

> CD /D C:\bin\php-7.1.4-Win32-VC14-x64
> php -S 127.0.0.1:80

次のように imagick の設定が出ていればOKです。

もし、HTTPサーバ時にエラーが出る場合は、VC14のランタイムを以下からダウンロードしてインストールしてください。
Microsoft Visual C++ 2015 再頒布可能パッケージ Update 3

SVGをアニメーションGIFにする

アニメーションさせるため、svgファイルを4種類用意します。

1.svg

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" width="500" height="70">
<rect x="0" y="0" width="500" height="70" fill="#fbfbc7"/>
<text x="10" y="50" stroke="#ff0000" stroke-width="10" font-size="38" font-weight="bold" letter-spacing="0" font-family="sans-serif">
0123456789
</text>
<text x="10" y="50" fill="#ffffff" font-size="38" font-weight="bold" letter-spacing="0" font-family="sans-serif">
0123456789
</text>
</svg>

2.svg

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" width="500" height="70">
<rect x="0" y="0" width="500" height="70" fill="#fbfbc7"/>
<text x="10" y="50" stroke="#ff0000" stroke-width="10" font-size="38" font-weight="bold" letter-spacing="0" font-family="sans-serif" transform="scale(1.1,1)">
0123456789
</text>
<text x="10" y="50" fill="#ffff99" font-size="38" font-weight="bold" letter-spacing="0" font-family="sans-serif" transform="scale(1.1,1)">
0123456789
</text>
</svg>

3.svg

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" width="500" height="70">
<rect x="0" y="0" width="500" height="70" fill="#fbfbc7"/>
<text x="10" y="50" stroke="#ff0000" stroke-width="10" font-size="38" font-weight="bold" letter-spacing="0" font-family="sans-serif" transform="scale(1.5,1)">
0123456789
</text>
<text x="10" y="50" fill="#99ffff" font-size="38" font-weight="bold" letter-spacing="0" font-family="sans-serif" transform="scale(1.5,1)">
0123456789
</text>
</svg>

4.svg

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" width="500" height="70">
<rect x="0" y="0" width="500" height="70" fill="#fbfbc7"/>
<text x="10" y="50" stroke="#ff0000" stroke-width="10" font-size="38" font-weight="bold" letter-spacing="0" font-family="sans-serif" transform="scale(1.3,1)">
0123456789
</text>
<text x="10" y="50" fill="#ff99ff" font-size="38" font-weight="bold" letter-spacing="0" font-family="sans-serif" transform="scale(1.3,1)">
0123456789
</text>
</svg>

複数のSVGをアニメーションGIFに変換するプログラムを作ります。

svg2agif.php

<?php
/*アニメーションGIF作成*/
$gif = new Imagick();

/*各コマを追加*/
foreach(['1.svg', '2.svg', '3.svg', '4.svg'] as $file) {
    $i = new Imagick();
    $i->readImage($file); //SVGファイルを読む
    $i->setImageFormat('gif'); //GIFに変換
    $i->setImageDelay(10); //表示時間(ミリ秒)
    $gif->addImage($i); //アニメーションに追加
    $i->destroy(); //破棄
}
$gif->setImageIterations(0); //表示回数(0で無限)
$gif->setFormat('gif');
$gif->writeImages('svg.gif', true); //ファイル(svg.gif)に出力

/*ブラウザに出力*/
header('Content-Type: image/gif');
readfile('svg.gif');

$gif->destroy(); //破棄

1.svg, 2.svg, 3.svg, 4.svg, svg2agif.php ファイルを C:\bin\php-7.1.4-Win32-VC14-x64 に置いてブラウザで http://localhost/svg2agif.php にアクセスします。

以下のように表示されれば成功です。

以上