mattintosh note

どこかのエンジニアモドキの備忘録

トップ > Emofuri > Emofuri×ImageMagick×FFmpeg practice note

Emofuri×ImageMagick×FFmpeg practice note

Emofuri ImageMagick FFmpeg Mac OS X えもふり

『えもふり』から出力したデータを加工する練習の個人的なまとめ。


ImageMagick で文字を埋め込む

何かメッセージを入れるときに。gravity <type> を使うと基準点を指定できる。

convert -alpha remove -delay 4 -loop 0 scene1/"*".png \
-font /System/Library/Fonts/Noteworthy.ttc \
-pointsize 16 \
-weight 700 \
-fill midnightblue \
-draw 'fill-opacity 0.8 gravity South text 0,20 "Powered by E-mote Free Movie Maker!!"' \
animation.gif

ImageMagick で出力したアニメーション GIF に残像が発生する


-alpha remove でアルファチャンネルを削除する。

convert -alpha remove -delay 4 -loop 0 scene1/'*'.png -resize 320x320 animation.gif

ImageMagick でクロップしたときに余白ができてしまう

クロップ時に元のキャンバスサイズが残ってしまうことがある。これはクロップと同時にページサイズも変更してあげればよい。クロップの座標に ! をつけるか、+repage を使う。

convert scene1/'*'.png -gravity Center -crop 800x800+0-280\! -resize 320 animation.gif
OR 
convert scene1/'*'.png -gravity Center -crop 800x800+0-280 -resize 320 +repage animation.gif

パーツの稼働範囲を確認する

-flatten すると単フレーム単画像になる。しかし優れたソフトには黒検出という優れた機能が(ry

-trim を使うとカンバスのサイズを最低限にしてくれる。

convert -flatten -background black -delay 4 -loop 0 foo1/'*'.png -resize 320x320 image.png

連番 PNG から MP4 & WebM 作成

作り方によってはファイルサイズがアニメーション GIF の 1/10 以下になるので GIF の代替として。でもスマホは autoplay 対応してない？ファイルの置き場所は Dropbox あたりが簡単。SugarSync は対応してないっぽい。

Emofuri から出力した PNG は透過 PNG になってるので背景を別途用意してオーバーレイをかける。その場合、d または duration で長さを調整しないとエンコードが止まらなくなる。入力が PNG の場合、ピクセルフォーマットが RGBA になっているので、yuv420p などに変換しておかないと QuickTime Player で再生できない（恐らく QuickTime プラグインを使っているブラウザも）。VLC Media Player は RGB にも対応してるのでそのままでもOK。

テキストのセンタリングは w と h でビデオサイズ、tw と th でテキストのサイズが取得できるのでそれらから中央配置時の座標を算出できる。text= 部分にバックスラッシュが残るようにすると複数行のテキストが書ける。WebM の場合も作り方は同じだけど libvpx のデフォルトビットレートが 200k とかなり低めなのでビットレートや qmax を設定した方が良さげ。

ffmpeg -framerate 25 -pattern_type glob -i scene1/'*'.png -filter_complex "
color=c=white:s=1500x1500:r=25:d=3.36[canvas];
[canvas][0]overlay[main];
[main]scale=flags=lanczos:size=640x640,drawtext=\
fontfile=$HOME/Library/Fonts/setofont.ttf:\
text=\
　　　　　　　　　えもふり\\
\\
Ｅ−ｍｏｔｅ　Ｆｒｅｅ　Ｍｏｖｉｅ　Ｍａｋｅｒ:\
fontsize=24:\
fontcolor=maroon:\
x=(w-tw)/2:\
y=(h-th)/2" -crf 23.0 -pix_fmt yuv420p animation.mp4

<video loop="" autoplay="" width="320" height="320">
    <source type="video/mp4" src="https://dl.dropboxusercontent.com/u/33538808/blog_20140629/b3c59579aee0e674af0965679b70fe9b.mp4"></source>
    <source type="video/webm" src="https://dl.dropboxusercontent.com/u/33538808/blog_20140629/c81043d7e0fb74b3897208f3ca326a7d.webm"></source>
    <p>＊動画の再生には対応ブラウザが必要です</p>
</video>

フレーム一覧出力

ImageMagick


montage によるタイル化。こちらは下の ffmpeg とは異なり、マスからオーバーした場合は次の画像に続く。

montage scene1/'*'.png -gravity Center -crop 800x800+0-280\! -tile 4x4 thumbs.png

ffmpeg

tile={x}x{y} のマスの数までしか出力できないので要計算。

ffmpeg -framerate 1 -pattern_type glob -i scene1/'*'.png -filter_complex '
color=c=black:s=1500x1500:r=1:d=83.00[canvas];
[canvas][0]overlay[v1];
[v1]scale=flags=lanczos:size=320x320,drawtext=fontfile=/System/Library/Fonts/Courier.dfont:fontcolor=yellow:x=4:y=4:text=%{n},tile=10x9' thumbs.png

ffmpeg と一緒についてくる ffprobe を使うとアニメーション GIF のプロパティから FPS を調べたりすることができる。

ffprobe -i animation.gif

アニメーション GIF を簡単にリサイズする

Picasa ウェブアルバムはソースイメージより小さいサイズのほとんどを生成してくれます。サイズは URL によって指定ができます。ただし、リサイズされた画像は少し品質が落ちるかもしれません。

<img src="https://cdn-ak.f.st-hatena.com/images/fotolife/m/mattintosh4/20010330/20010330225440.gif" />
<img src="https://cdn-ak.f.st-hatena.com/images/fotolife/m/mattintosh4/20010330/20010330225450.gif" />
<img src="https://cdn-ak.f.st-hatena.com/images/fotolife/m/mattintosh4/20010330/20010330225500.gif" />
<img src="https://cdn-ak.f.st-hatena.com/images/fotolife/m/mattintosh4/20010330/20010330225510.gif" />

背景色や背景画像を追加する

Emofuri で出力した透過 PNG に背景を追加します。

単色の場合。これは複数枚でも使えるのでそのままアニメーション GIF として書き出せる。

convert -alpha remove -background antiquewhite \
    scene1/'*'.png \
    -gravity Center -crop 800x800+0-280\! \
    -resize 320 \
    animation.gif

背景画像を使う場合。複数枚の場合は取り回しがよくわからないのでとりあえずループで処理して後から GIF 化…。ImageMagick の -resize は 320x320 なら長辺 320px、320^ なら短辺 320px に合わせてくれる。アスペクト破壊は !。

convert \( wallpaper.jpg -resize 320^ -gravity Center -crop 320x320+0+0\! \) \
\( scene1/e-mote3_0000.png -gravity Center -crop 800x800+0-280\! -resize 320 \) \
-composite image.png

丸切り出し

convert \( \
\( wallpaper.jpg -resize 320^ -gravity Center -crop 320x320+0+0\! \) \
\( scene1/e-mote3_0000.png -gravity Center -crop 800x800+0-280\! -resize 320 \) \
-composite \) -matte \( -size 320x320 xc:none -draw 'circle 160,160 318,168' \) -compose DstIn -composite circle.png

角丸切り出し

convert \( \
\( wallpaper.jpg -resize 320^ -gravity Center -crop 320x320+0+0\! \) \
\( scene1/e-mote3_0000.png -gravity Center -crop 800x800+0-280\! -resize 320 \) \
-composite \) -matte \( -size 320x320 xc:none -draw 'roundRectangle 0,0 318,318 32,32' \) -compose DstIn -composite rounded.png

2次元少女を2次元の世界に入れる（遠近法変形）

for f in src/*.png
{
   convert $f -background transparent \
       -gravity Center -crop 1600x1200+0+0\! -resize 401x326\! \
       -virtual-pixel transparent \
       -gravity NorthWest -distort perspective '0,0,0,0 0,326,16,326 401,326,401,307 401,0,381,62' \
       -fill white -colorize 30% -extent 512x512-63-36 \
       background.png -compose Overlay -composite dst/${f##*/}
}
for f in mp4 webm
{
    ffmpeg -framerate 20 -pattern_type glob -i dst/"*".png -filter_complex '
color=c=white:s=512x512:r=15:d=5.00[canvas];
[canvas][0]overlay' -qmin 4 -qmax 4 -r 20 video.$f
}

colorize オプションの比較表

-fill white -colorize 30% (default) -fill black colorize 30%

Frequently updated?

resources