Bye Bye Moore

PoCソルジャーな零細事業主が作業メモを残すブログ

m4とimagemagickを使ってHTMLテンプレートにインライン画像を埋め込む

実際のところ

Data URIを使って、インライン画像を生成
PNG画像のインラインなら、特に記述変更の必要なく埋込ができます

convert rose: -resize - inline:PNG:-

これをm4をつかって埋込します
以下の様にテンプレート(index.html)を用意して

<html>
<body>
<img src="YOURIMG1">
<img src="YOURIMG2">
<img src="YOURIMG3">
<img src="YOURIMG4">
</body>
</html>

m4を実行
動きを見たいだけなので、とりあえず生成物の流用などは行わずべた書き

$ m4 \
-D YOURIMG1="syscmd(convert rose: -resize - inline:PNG:-)" \
-D YOURIMG2="syscmd(convert rose: -resize 120% inline:PNG:-)" \
-D YOURIMG3="syscmd(convert rose: -resize 140% inline:PNG:-)" \
-D YOURIMG4="syscmd(convert rose: -resize 160% inline:PNG:-)" \
index.html > neoindex.html