簡単な処理をhtmlで作るメモって案外やってないからやってみた。
もうすぐxx日とか表示させてみる。
URLで画像だけでなく、埋め込み画像もやってみよか。
埋め込み画像はhtmlに入れる時base64でエンコードしたものをimg srcってタグに展開する。
base64って７ビット表現やったかな。
元のjpgとかpdfよりもサイズが膨らんでまう。
pdfとかもインライン表示できるし、djangoの処理で日常的にやってるんやけど、一回書いたら問題出たときしか見いひんからここでメモ。
base64変換やってくれるサイトあるんかなって探したらすぐあった。
作者さんありがとう。
画像Base64エンコード - 画像をBase64文字列へ変換 | Web ToolBox
画像ファイルをBase64文字列へ変換することができるツールです。一度に複数の画像をブラウザ上で高速に変換することが可能です!
web-toolbox.dev
結論
こうなる。
画像は、左が自分のサイトにある4KBぐらいのjpeg画像で、右がそれをbase64エンコードしてhtmlに埋め込んだもの。
下の方に今日の日付との日数差が出てる。
書いた内容
こんな感じ。
<!doctype html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>gvis sample</title>
</head>
<body>
<div class="header"><font size="8"><center>期限までもうすぐ！！(左がURL指定、右が埋め込み)</center></font></div>
<br>
<div class="main" style="text-align: center">
<img src="https://gavann-it.com/wp-content/uploads/2021/10/mac-Monterey009.jpg"/>
<img src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAYEBQYFBAYGBQYHBwYIChAKCgkJChQODwwQFxQYGBcUFhYaHSUfGhsjHBYWICwgIyYnKSopGR8tMC0oMCUoKSj/2wBDAQcHBwoIChMKChMoGhYaKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCj/wAARCAFCAT8DASIAAhEBAxEB/8QAHwAAAQUBAQEBAQEAAAAAAAAAAAECAwQFBgcICQoL/8QAtRAAAgEDAwIEAwUFBAQAAAF9AQIDAAQRBRIhMUEGE1FhByJxFDKBkaEII0KxwRVS0fAkM2JyggkKFhcYGRolJicoKSo0NTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uHi4+Tl5ufo6erx8vP09fb3+Pn6/8QAHwEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoL/8QAtREAAgECBAQDBAcFBAQAAQJ3AAECAxEEBSExBhJBUQdhcRMiMoEIFEKRobHBCSMzUvAVYnLRChYkNOEl8RcYGRomJygpKjU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6goOEhYaHiImKkpOUlZaXmJmaoqOkpaanqKmqsrO0tba3uLm6wsPExcbHyMnK0tPU1dbX2Nna4uPk5ebn6Onq8vP09fb3+Pn6/9oADAMBAAIRAxEAPwD5UooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiirOnWN3qV5Haadaz3d1KcJDBGXdj6BRyaAK1Fdf4q+G3i3wnoVvrHiLRpdPsLiYQRvLIm4uVZgCgbcOFbqB0rkKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKAOl+Hfg7UvHfiu00LSFAlmO6WZhlYIx9529h+pIHevv74a/Dnw/8PdIW00O0X7SygXF7IAZpz/tN2Hoo4H615T+xj4YhsPA9/wCIpEBu9TuDCjkciGPjA+rl8/Qele0+NvFmj+C9AuNX1+6W3tYh8q9XlbsiL/Ex9PxOACaAPAP23ddiTRvDmgK4M8tw986jqqopRSfqXf8A75NfJFdT8S/GV7498Y32vagNhmOyGEHIhiH3UH0HU9ySe9ctQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFer+BvgH458W28d0tjFpVjIMrPqLGLcPUIAX+hIAPrXtf7M/wVtdN02z8W+K7VZtUuFE1jazLlbZDysjA9XPUZ+6Md+n0lQB8gv8Asm60LfMfibTmnx9xrdwuf97JP6V5t41+B/jvwmry3OkNf2acm504mdQPUqBvA9yoFfoPRQB8H/Dv40eN/Dvhmz8IeFNKs7h4Wk8oi0kmuCXcscKGwcFj/DXSD4NfFb4m3yar41v0s8j5P7QlyyKeyQxghPodtfZKQxJI8iRosj/eYKAW+pp9AHye/wCyRcCHKeMYjNj7p04hfz83+leeeOP2efHHhi3kuoLaDWbNBuZ9PYs6j1MZAb/vndX3nRQB+VjAqSGBBHBB7UlfTv7YnhvwjY3NrqtjcwWnim5fM9lEv/HzGf8AlqwHCsD3ON3PUivmKgAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACu++BfhVPGPxR0TS7lA9kshublSMgxRjcVPsxAX/gVcDX0X+xNaLJ49127YZaHTfLX23yof/ZKAPskAAYHAooooAKKKKACiiigArjfi542g+H/gW/1yVVkuFAhtYW6STN90H2GCx9lNdlXy1+3FqEq23hLTlJEEj3Nw47FlEar+QZvzoA+X9d1e/wBe1e61TV7mS6vrpzJLLIclif5AdABwAMCqFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRR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Nr+x7L/p5/7+L/8AE0f2PZf9PP8A38X/AOJrF/tG9/5/Ln/v63+NH9o3v/P5c/8Af1v8aANr+x7L/p5/7+L/APE0f2PZf9PP/fxf/iaxf7Rvf+fy5/7+t/jR/aN7/wA/lz/39b/GgDa/sey/6ef+/i//ABNH9j2X/Tz/AN/F/wDiaxf7Rvf+fy5/7+t/jR/aN7/z+XP/AH9b/GgDa/sey/6ef+/i/wDxNH9j2X/Tz/38X/4msX+0b3/n8uf+/rf40f2je/8AP5c/9/W/xoA2v7Hsv+nn/v4v/wATR/Y9l/08/wDfxf8A4msX+0b3/n8uf+/rf40f2je/8/lz/wB/W/xoA2v7Hsv+nn/v4v8A8TR/Y9l/08/9/F/+JrF/tG9/5/Ln/v63+NH9o3v/AD+XP/f1v8aANr+x7L/p5/7+L/8AE0f2PZf9PP8A38X/AOJrF/tG9/5/Ln/v63+NH9o3v/P5c/8Af1v8aANDUtLt4LN5oGlBTGQ7A5yccYArFqae6uJwBPPLIByA7k4/OoaACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKAP//Z" />
<br>
<br>
<center><font size="6">
<script>
//比較する日付オブジェクトを２つ用意する
const today = new Date();
const year = today.getFullYear();
const month = today.getMonth() + 1 ;
const date = today.getDate();
var dayToday = `${year}/${month}/${date}`;
document.write("---今日は",dayToday,"なので4月1日まで、");
var day1 = new Date(dayToday);
var day2 = new Date("2024/4/1");
//差日を求める(86,400,000ミリ秒=1日)
var termDay = (day2 - day1) / 86400000;
document.write("あと",termDay,"日---");
</script>
</font></center>
</div>
</body>
</html>javascriptで日付計算けっこう面倒やねんな。
