動画用画像ファイルをHTMLから作成する

動画に用いる画像ファイルは PowerPoint のようなソフトで作成すると奇麗にできます。しかし、当然ながら一枚一枚手書きをしていると、手間と時間が掛かります。

そこで、ある程度見栄えを犠牲にしても半自動的に作成できる方法を考えてみました。フォントの設定や、文字の折り返しなどを簡単に自動化できることからHTML文書を作成し、これを wkhtmltoimage でPNGファイルに変換するという方法を取りました。

 

#!/bin/bash
ch="凉面"
py="Liáng miàn"
ja="冷たいそば"

error_num=0
for var in ch py ja
do
if [ -z "${!var}" ]
then
printf "[%s] 関数 %s の変数 ${var} に値がありません\n" \
"`date +"%F %T"`" `basename $0`
error_num=`expr ${error_num} + 1`
fi
done
if [ ${error_num} -ne 0 ]
then
 exit
fi

cat << _HEADER_ > image.html
<html>
  <head>
    <meta charset="UTF-8">
    <style type="text/css">
    table { page-break-inside:auto }	
    tr { page-break-inside:avoid; page-break-after:auto } 
   </style>
  </head>
_HEADER_

cat << _BODY_ >> image.html
 <body bgcolor="#88AACC">
  <table border="0"  width="100%">
  <meta http-equiv="content-type" charset="utf-8">
  <th></th>
  <tr align="center" valign="top" > <td style="font-family: FangSong;  font-size:360%;">${ch}</td></tr>
  <tr></BR></tr>
  <tr align="center" valign="top"> <td style="font-family: Noto Serif CJK JP; font-size:100%;">${py}</td></tr>
  <tr></BR></tr>
  <tr align="center" valign="top"><td style="font-family: Noto Serif CJK JP; font-size:200%;">${ja}</td></tr>
_BODY_

cat << _FOOTER_ >> image.html
</table></body></html>
_FOOTER_

xvfb-run wkhtmltox/bin/wkhtmltoimage --format png --height 480 --width 720 image.html image.png
rm image.html

入力値は ${ch} ${py} ${ja} で、それぞれ中国語、ピンイン、日本語訳です。これらの変数は export によって上位のスクリプトから引き渡すこともできます。というか、是非そのような使い方をして下さい。

幅720pixel、高さ480pixelの image.png という画像ファイルが出力されます。