Kawa.netxp [JavaScript] dataスキームURI生成（画像データのBase64変換）

Greasemonkey のユーザスクリプトなどの JavaScript ソースコード内に画像データを埋め込める、
『data:image/gif;base64,〜〜〜』形式のデータ（dataスキーム）を生成します。
画像ファイルなどのバイナリデータを Base64 エンコードに変換しています。
data スキーマでは、外部ファイルへのアクセスなしにスクリプト内で完結して画像を表示できるため、
小さなアイコンなどの表示には便利です。data スキームは Firefox・Opera では利用できます。
残念ながら Internet Explorer は data スキームに対応していないので利用できません。

やってみよう

生成したコードの使い方

以下のように、生成したコードの data 変数を <img> 要素の src 属性の値として代入すると、 画像が表示されます。

<img id="icon_here">
<script>
    var data = 'data:image/gif;base64,'+
        'R0lGODlhAAEwAMQAAJ2M5Me98GRK1DoYyYBr3PHv++Pe99XO81Y50auc6PBkZEgpzbmt7HJa2I57'+
                // 中略 //
        'fS3CqU7XGYgE+GqHvrLJ8Tr6qXmqiwAF9CffgnMNqmWHAWNBwwGsKpKsrmJqltOOV69nuYxSkqpo'+
        'Tata18rWtrr1rTIIAQA7';
    var icon_elem = document.getElementById("icon_here");
    icon_elem.src = data;
</script>

コメントはこちらへ by AjaxCom

その他のページへのリンク

• kawa.net xp トップページ
• [Greasemonkey] ユーザスクリプト by kawa.net
• data uri変換機（最速インターネット研究会）※テキストのみ
• The data: URI kitchen　※Base64でなく %HH 形式のURIエンコード

このページへのトラックバック by AjaxTB

トラックバックURL：http://www.kawa.net/service/tb/ajaxtb.cgi/works/js/data-scheme/base64.html