SingleFile を使ってウェブサイトを1つのファイルで保存する

SingleFile というツールを知ったので少し試してみました.SingleFile はウェブブラウザのエクステンションやコマンドで動作するウェブページを1つのファイルとして保存するものです.

mono製InlineHtmlImagesでhtml+画像の複数ファイルを単一の画像埋め込みhtmlに変換する

npm の html-inline を試しましたが途中でコケてしまいます.

mono製の InlineHtmlImages を試すとうまくいきました :)

画像作成
$ convert pango:"<span font=\"/Library/Fonts/NotoColorEmoji\" size=\"24576\">😺</span>" cat.jpg
html作成
$ cat << __EOF__ > cat.html
> <html>
> <body>
> <img src="cat.jpg">
> </body>
> </html>
> __EOF__
画像埋め込み
$ mono ~/Downloads/inlinehtmlimages-mono.exe -in ./cat.html -out ./cat_inline.html
埋め込まれているのを確認
$ cat cat_inline.html
<html>
<body>
<img src="data:image/png;base64,
/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAgGBgcGBQgHBwcJCQgKDBQNDAsLDBkSEw8UHRofHh0aHBwgJC4nICIsIxwcKDcpLDAxNDQ0Hyc5PTgyPC4zNDL/2wBDAQkJCQwLDBgNDRgyIRwhMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjL/wAARCAAmACgDASIAAhEBAxEB/8QAHwAAAQUBAQEBAQEAAAAAAAAAAAECAwQFBgcICQoL/8QAtRAAAgEDAwIEAwUFBAQAAAF9AQIDAAQRBRIhMUEGE1FhByJxFDKBkaEII0KxwRVS0fAkM2JyggkKFhcYGRolJicoKSo0NTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uHi4+Tl5ufo6erx8vP09fb3+Pn6/8QAHwEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoL/8QAtREAAgECBAQDBAcFBAQAAQJ3AAECAxEEBSExBhJBUQdhcRMiMoEIFEKRobHBCSMzUvAVYnLRChYkNOEl8RcYGRomJygpKjU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6goOEhYaHiImKkpOUlZaXmJmaoqOkpaanqKmqsrO0tba3uLm6wsPExcbHyMnK0tPU1dbX2Nna4uPk5ebn6Onq8vP09fb3+Pn6/9oADAMBAAIRAxEAPwD1jV/EEllqzWqSpEEUH5o9wYkZ554qS38TMSUktvNcDh4D8uffPT8zWX4p0xptegkwRFNH8x916/piokurKK5WxSeBZwuRBvG7HrjrXx+Kx+MoYqpGMtE9t9D2I0aEqMXbVo1P+EubZ5n2D5PM8v8A13Of++aluPErAhIrfymIyWnPH4Y6/mKwvsB8gR+YOJvMzj36U97qymuGsGnhacrkw7xvx6461zrOMbJNKX4L/IuWGw6asvzNbR/EEl7qotWlSUMpOVj27SPTnmiqHhXTWh1y4kPMcUeFPqW6foDRX0eT1KtTDKdV3bb+44MdGEKtqfZE3ifWbC01a2gurgQMsTcyqVQ5K9GI2np2NcUvhJp/GK6/Hfxvas4mAXlicYwD0x/Tiuv8aR3E06Q219dvcld0Vja2ysxHQszsCFH1wOK871K58QaJDBe2NpHdxhNlxZyZYoQThgU2noeQO46Vw46hUhipSpyUXUVtdtvTTY1oNTpK6b5ex0Qudd/4TQ2P2i3/ALO8vz8bPm2dNvrnP+e1Uh4SNt4xfX5b9FtQ5mKtwwJGME9Mc/0rHbxlqAt/tY8LWf2jZt/4/wBy+OuNuc/hmpdLn1/V7W5vb+2jtxKgS3s4wVz8wJY79xzxgZ/SuSWGq4ePMpxSa5Xbrf5fidDjzNKUJX3V1Y9J8L6zYXeqXUFrcCcmNDuiUsgwWzlgNo6jvRUPgyO4hlkguL66W5C7prG6tkRlHRWV1ADD3GRzRX0WAoeww8ab6f538jy68+eo2drWTf6BZag5kZWilPWSM4J+o6GiiuirRp1Y8tRXREKkqbvB2Zl/8IXF5m77Yf8Av0M/nmtWw0Gy09xIitJKOkkhyR9OwoornpZfhqUuaENfv/M2ni61RWlLQ1aKKK7DnP/Z" alt='cat.jpg' >
</body>
</html>
画像ファイルを削除しておく
$ rm ./cat.jpg
ウェブブラウザで確認
$ xdg-open ./cat_inline.html

20190811 02 08 14 32387

他にもLinuxネイテイブなものがありそうな気がします.(shell script + base64 コマンドでも多分行ける?)

環境
$ mono ~/Downloads/inlinehtmlimages-mono.exe -help|head -6|uniq

InlineHtmlImages v1.7
 Build:  3/31/2018
 Author: Dennis Lang
 Web:    home.comcast.net/~lang.dennis
$ dpkg-query -W mono-runtime chromium imagemagick libpango-1.0-0
chromium        76.0.3809.100-1
imagemagick     8:6.9.10.23+dfsg-2.1
libpango-1.0-0:amd64    1.42.4-7
libpango-1.0-0:i386     1.42.4-7
mono-runtime    5.18.0.240+dfsg-3
$ lsb_release -dr
Description:    Debian GNU/Linux bullseye/sid
Release:        unstable
$ uname -m
x86_64