ImageMagickとFFmpegを利用してgifアニメとmp4動画を生成してみましょう

こんにちは。

PHPに触れて1年半が過ぎました。
最近はできることの範囲を拡げようとImageMagickやFFmpegを利用してみたりしてみなかったりです。

今回はPHP上でexec関数を用いて簡易動画生成を行なったので、そのことを書いていきます。よろしくお願いいたします。

ImageMagickとFFmpeg

ImageMagickもGDも画像処理を行なうために用いられます。
前回この記事ではGDを利用して顔の座標をプロットしていきました。
GDは使いやすい反面最低限の加工機能しか揃っていないのに対して、ImageMagickは機能の数がとても多いのが特徴のひとつです。リッチな加工ができますね。画質も後者のほうがよいと言われています。
インストールの方法は他のブログさんでたくさん紹介されているので検索してみましょう。

ちなみにPHP上でImageMagickを使うためにはImagickもインストールしておく必要があります。
インストールの方法は他のブログさんでたくさん紹介されているので検索してみましょう。

一方FFmpegは動画音声処理を行なうために用いられます。
インストールの方法は他のブログさんでたくさん紹介されているので検索してみましょう。

どんな動画にするのか

今回は一枚の画像に文字を浮かす動画を作りたいと思います。まず素材の用意です。320*240のpng画像を用意しました。ももさんです。かわいいですね。

「この画像の下部に「ももさん」という文字をいれて拡大するようなアニメーションを付けたい！」という思惑があります。応用すれば、画像の中で字が自由に動くし、何なら画像が動いてもいいし、色を変えてもいいし、といった具合です。

ではさっそくPHP上で実装していきます。

ImageMagickで文字をいれて動かす

$input_image_path = './momo.png'; //320*240のももさんの画像
$message = 'ももさん';
$movie_second = 5; //動画の秒数
$movie_framerate = 5; //1秒間の枚数
$font_size = 36;

for($i=1; $i<=($movie_second*$movie_framerate); $i++){ //5*5=25枚生成されます
    $img = new Imagick($input_image_path); //Imagick利用
    $draw = new ImagickDraw();
    if(10 < $i && $i < 14){ //11～13枚目でフォント拡大！
        $font_size = $font_size + 10;
    }elseif(15 < $i && $i < 19){ //14～18枚目でフォント縮小！
        $font_size = $font_size - 10;
    }
    $draw->setFontSize($font_size);
    $draw->setFont("./sample.ttf"); //すきなフォント指定
    $draw->setGravity(imagick::GRAVITY_CENTER); //文字の開始位置はセンターで
    $draw->annotation(0, 90, $message); //座標を指定して描画
    $img->drawImage($draw); //合成
    $img->writeImage('./momo_'.sprintf('%02d', $i).'.png'); //書き出し
    $img->destroy();
}

$input_image_path = './momo.png'; //320*240のももさんの画像

$message = 'ももさん';

$movie_second = 5; //動画の秒数

$movie_framerate = 5; //1秒間の枚数

$font_size = 36;

for($i=1; $i<=($movie_second*$movie_framerate); $i++){ //5*5=25枚生成されます

$img = new Imagick($input_image_path); //Imagick利用

$draw = new ImagickDraw();

if(10 < $i && $i < 14){ //11～13枚目でフォント拡大！

$font_size = $font_size + 10;

}elseif(15 < $i && $i < 19){ //14～18枚目でフォント縮小！

$font_size = $font_size - 10;

}

$draw->setFontSize($font_size);

$draw->setFont("./sample.ttf"); //すきなフォント指定

$draw->setGravity(imagick::GRAVITY_CENTER); //文字の開始位置はセンターで

$draw->annotation(0, 90, $message); //座標を指定して描画

$img->drawImage($draw); //合成

$img->writeImage('./momo_'.sprintf('%02d', $i).'.png'); //書き出し

$img->destroy();

}

動画を生成するためには連続した画像が必要です。ここではももさんのpng画像を元にして全部で25枚のpng画像を生成していきます。11～13枚目でフォントを拡大し14～18枚目でフォントを縮小することで動画として合成した際に文字に動きを付けられます。

17行目のimagick::GRAVITY_CENTERは文字配置のルールを設定する記述ですが、こちらの記事を参考にいたしました。ありがとうございます！

生成されるファイルは「./momo_01.png」から「./momo_25.png」の25枚。次にこれらを合成していきますー

ImageMagickによるgifアニメとFFmpegによるmp4動画

まずImageMagickのコマンドでgifアニメを生成します。

//静止画からGIFを生成する
$command = 'convert ./momo_*.png ./momo.gif';
exec(escapeshellcmd($command));

//静止画からGIFを生成する

$command = 'convert ./momo_*.png ./momo.gif';

exec(escapeshellcmd($command));

convert
ファイルを変換するためのImageMagickのコマンド
./momo_*.png
「./momo_01.png」から「./momo_25.png」の25枚の入力ファイル
./momo.gif
出力ファイル名

次にFFmpegのコマンドでmp4動画を生成します。

//静止画から動画(H264mp4)を生成する
$command = 'ffmpeg -r '.$movie_framerate.' -i ./momo_%02d.png -vcodec libx264 -fpre /usr/share/ffmpeg/libx264-medium.ffpreset -y -s 320x240 ./momo.mp4';
exec(escapeshellcmd($command));

//静止画から動画(H264mp4)を生成する

$command = 'ffmpeg -r '.$movie_framerate.' -i ./momo_%02d.png -vcodec libx264 -fpre /usr/share/ffmpeg/libx264-medium.ffpreset -y -s 320x240 ./momo.mp4';

exec(escapeshellcmd($command));

ffmpeg
動画音声処理をするためのFFmpegのコマンド
-r 5
入力静止画の更新を毎秒5フレーム（$movie_framerate変数）に指定
-i ./momo_%02d.png
入力画像のファイル名と形式を指定
「./momo_01.png」から「./momo_25.png」の25枚の入力ファイル
-vcodec libx264
mp4フォーマットでエンコーダをH.264に指定
-fpre /usr/share/ffmpeg/libx264-medium.ffpreset
ここではまりました…詳しくはこちら
-y
生成の際に既存ファイルを上書きします
-s 320×240
動画サイズはここで指定
./momo.mp4
出力ファイル名

最後にもし必要なかったら途中生成されたpng画像は削除しましょう。

$command = 'rm -f ./momo_*.png';
exec(escapeshellcmd($command));

1 2	$command = 'rm -f ./momo_*.png'; exec(escapeshellcmd($command));

生成結果を見て行きます。

生成されていました！

「momo.gif」と「momo.mp4」が生成されていました。こんなかんじ。かわいいですね。

いろいろ応用できそうですね(゜-゜)

2015/05/29 PHP GDとSkyBiometryAPIを使って顔座標を浮かしてみましょう	2017/03/30 IBM Watson Text to Speech 機能で音声合成してみましょう
2017/06/25 SPACE CAT GENERATOR を公開しました	2017/09/28 とっても簡単！TwitterのOauth認証