ホーム > HTML > HTMLに画像を埋め込む。

HTMLに画像を埋め込む。 このエントリーを含むはてなブックマーク はてなブックマーク - HTMLに画像を埋め込む。

2006 年 10 月 2 日

技術メモ帳 – URI の data: スキーム

今日初めて知ったのだが、data スキームを使えば

URIにデータを組み込めるそうだ。

[via] [を] HTMLファイルに文字列として画像データを埋め込む

おぉー!知らなかったー!ってことでやってみる。

irb(main):001:0> require "base64"
=> true
irb(main):002:0> Base64.b64encode(IO.read("saikyoline_60.gif"))
R0lGODlhPAA8AOYAAABmAO7u7n+yf1iFWDOZM8zMzCqAKqWlpb29vTycPLW1
tXuce9fX1xBwEEKOQprCmv///1ObUyF3Id3d3ZmZmWaZZrPAs0mfSTiGOMDG
wE2BTc3hzefn5whrCCp9Kq2trYq5ilmbWYqdivf397rWuhlyGW+pbzGDMa7O
...

で、→
SaikyoLine.jp
でたー!(ソースは↓)

<img src="data:image/gif;base64,R0lGODlhPAA8AOYAAABmAO7u7n+yf1iFWDOZM8zMzCqAKqWlpb29vTycPLW1tXuce9fX1xBwEEKOQprCmv///1ObUyF3Id3d3ZmZmWaZZrPAs0mfSTiGOMDGwE2BTc3hzefn5whrCCp9Kq2trYq5ilmbWYqdivf397rWuhlyGW+pbzGDMa7Ortrp2kuTS9Xm1UOdQ2mlabXTtWaZZjF+MZOwk5O+kw1uDXuwe4SihESUROfx56HHofD28GCIYMXFxVKUUoO1g1KPUp2lnXOQc1mSWbXOtY67jsXcxSJ6IpmZmdDj0HOrc42qjTt/O/f/9zyMPKKrouDs4GOhY1iLWKbKpnGdcf///wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAUUAFMALAAAAAA8ADwAAAf/gBCCg4SFhoeIiYqLjI2Oj5CRkpOUlZaXmJmam5ydigEMoaKjpKITnooHHwqsra6vrAc5qIcjBzsFubq7vDsIB7SIGQoHCri8uTsKH6sIp8GIIwUUGcgZHwUcI9CNHArIHwzcjyPYuxnA44k5LiYqJ0o/vAoaDRInTyizgiMkT0xMhmzL1C9EkQ4NMKiIIOXbrh8RLlyIoKJBEQFORrRoYCNCBAkoMN0QUIRjBBYEUhJYgIAXhQQqU0YwAKCDgQsqT0SxNMLEDAwRYsYUcSxXBhFCk8ZscKPShiI3lRJI8ETeLgVAFuKUmvJCg0ouJNhQmiACBgBQHOr6ECMEhhIA/wwEVUqR0o0Gc2MmUFECw5AbB1ruOhBgUI4hHJWCpBSBiVIbJzYMusUrHaENJfJ2LTIw0ggAW4VieDAowIF5BQ6ZcBzTL6UjAKTaYDJwgtpcHzgcChszwol9kjY0kJrAABPJvnh96EwoReyULBqEpJRjRmihCWwAkOAgSbVcCBREK6GCwEwTzCW1MACTeAQYJTqUgBFkwY5ERAzIH4IphwP2XKmUnQMezNABdz2ssAQ0N4SQWYBJseDRWeShkB4nUXjQgArXQaiSRBI0QANwnpBQkQRMROShUGY1QBo0K/TABFx9OTDWihGU0MKFqBSwgA8abgfDSQF6BcIkTpzVwf8JLjCCgGAFZFADFCd0wESHMV1QAo+LhMBEAnudwMgHRRUQDgRO0EAeVwA0BUkOHaA0VQckGpKDOboc0NkRHWi2lJuP9GBATAbgoIhtu+zwQSFIYKAUC1tCMoIEmpmliDJX3UcIDY4mtVAkLjTQXkrFObACImQ+9AwEN/TwoFBaSsZPLuIkosKNejHRQAhEFMLBabpk8MMII6AQgT1+EuAVEoQoykwiTnSAZVc2NLCdAy08YIEFVwGhn0l0lQBCZwyQiYCmhwgwKIQSNmaADlAWcAAUKj56QgNNlkbZmbUUkSyERD0kZ1ItIkHiCE/moiciJIhKapVWRjCqXhQkSoHHUBJWawAIgA4SnlHiITIEpRNJEMINN8hwAgApStReBE3sgoAIEl3ARIgY9JCCMGp9k8gRIZxwggpRkOgECCoYUIKBHQxwmwI6FMHEEzJswKUg5Q6m2ybG7PLBqoyUW+YPnHCAJ25gK2JmmU9uMsEB3+mCwNdXg8JKmWamHQkHBYRXTNznLNPMk+Ex0wwy8l7dSHgJI97LDpBH7rguil7S9eSYZ56Lz5asAsvnoIfeSm6XRG766ainrnrk6rTu+uuwxy777LQHAgA7" alt="SaikyoLine.jp"/>

※でない方へ。「そこ、\nとか入ってません?」いや、自分がハマったもんで。

[ref.] RFC 2397 – http://www.ietf.org/rfc/rfc2397.txt


カテゴリー: HTML タグ:
コメントは受け付けていません。