HTMLファイルに文字列として画像データを埋め込む
2006-10-01-1
[Tips][Programming]
画像データを文字列として img の src で指定できる。
これにより、HTMLファイル1つでテキストと画像が表示できる。
技術メモ帳 - URI の data: スキーム
(http://d.hatena.ne.jp/lurker/20060810/1155213304) によると、
表記方法は下記。
表示は IE6 ではだめだけど、Firefox だとOK。
表示例↓(1x1の画像)
以下、Perl モジュール MIME::Base64 を使って「BASE64データ」を
作るサンプルプログラムと実行例:
ref.
- [を] 最小サイズGIF画像を出力するCGI[2004-12-08-4] ←ミニGIFつながり
- [を] uudeview[2002-04-11-3] ←Base64つながり
- [JavaScript] dataスキームURI生成(画像データのBase64変換)
http://www.kawa.net/works/js/data-scheme/base64.html
これにより、HTMLファイル1つでテキストと画像が表示できる。
技術メモ帳 - URI の data: スキーム
(http://d.hatena.ne.jp/lurker/20060810/1155213304) によると、
表記方法は下記。
「BASE64データ」の簡単な作り方は、<img src="data:image/gif;base64,BASE64データ">
など。curl -s https://i.yimg.jp/images/search/head_050825.gif | \ openssl base64 | tr -d '\n'
表示は IE6 ではだめだけど、Firefox だとOK。
表示例↓(1x1の画像)
以下、Perl モジュール MIME::Base64 を使って「BASE64データ」を
作るサンプルプログラムと実行例:
% cat base64.pl #!/usr/bin/perl use strict; use warnings; use MIME::Base64; my $str = join('', <>); (my $ec = encode_base64($str)) =~ s/\n//g; print $ec, "\n"; % od -c 1x1.gif 0000000 G I F 8 9 a 001 \0 001 \0 200 377 \0 377 377 377 0000020 \0 \0 \0 ! 371 004 001 \0 \0 \0 \0 , \0 \0 \0 \0 0000040 001 \0 001 \0 \0 002 002 D 001 \0 ; 0000053 % ./base64.pl 1x1.gif R0lGODlhAQABAID/AP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==
ref.
- [を] 最小サイズGIF画像を出力するCGI[2004-12-08-4] ←ミニGIFつながり
- [を] uudeview[2002-04-11-3] ←Base64つながり
- [JavaScript] dataスキームURI生成(画像データのBase64変換)
http://www.kawa.net/works/js/data-scheme/base64.html