データ URI スキームを使用すると、HTML、CSS、Javascript などで使用できるインライン コードを使用して Web ページにデータを含めることができます。 データ URI スキームは、次のように Web ページに画像を埋め込むためによく使用されます。 <img alt="何崇天の顔写真(お使いのブラウザはデータ URI スキームをサポートしていないため、画像を表示できません)" src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEBcQFxAAD/2wBD/*ここでは多くのデータが省略されています*/NONPmfvcqcdZR7XT27n//2Q%3D%3D"/> データ URI スキームの形式は次のとおりです。 data:[<MIMEタイプ>][;base64],<データ> この形式は比較的単純です。比較すると、上記の img は base64 を使用してエンコードされた jpg 画像であることがわかります。 この画像をこのページに埋め込むと、次のように表示されます。 base64 エンコードに加えて、次のように %xx 形式の 16 進 URL エンコードも使用できます。 : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : 画像データの生成 上記のフォーマットに従って、小さなプログラムを書いて生成することもできますが、それほど面倒な必要はありません。この(無料の)サービスを提供するウェブサイトはたくさんあります。 いくつか例を挙げます: 1. http://dataurl.sveinbjorn.org/dataurlmaker プレビューと簡単なコピーを提供します。 2. http://websemantics.co.uk/online_tools/image_to_data_uri_convertor/ プレビューを提供し、対応する CSS URI データを生成できます。 3. http://software.hixie.ch/utilities/cgi/data/data ヒント: 生成は画像データに限定されません。 使用方法は 3 つあります (下図の 1、2、3 を参照)。 エンコード方法を指定できますが、インターフェイスは使いやすくありません。 グループプレゼンテーションでの使用 [画像の挿入/編集]ボタンをクリックします。 次のウィンドウがポップアップ表示されます。上記の URL のいずれかを使用して画像データを生成し、それをコピーして画像アドレス テキスト ボックスに貼り付けます。 以下のように、「挿入」、「OK」をクリックします。 効果を見る: http://space.cnblogs.com/group/topic/41938/ |
<<: MySQL と Golan 間の従来の分散トランザクションのための 7 つのソリューション
>>: CentOS7 ファイアウォール操作コマンドの完全なリスト
次のコードは、MySQL 5.7.22 バイナリ パッケージのインストール方法を紹介しています。具体...
必要なコメントを追加することは、責任感と道徳心のあるフロントエンド開発者が持つべき良い習慣であり、コ...
序文:私は友人のプロジェクトのバグを修正するのを手伝ったのでこれを書きました。この関数を書くのは初め...
1. MySQLが以前にインストールされていたかどうかを確認するコマンド: rpm -qa|grep...
目次1. シナリオ2. サンドボックスの基本機能3. iframeの実装4. Webワーカーの実装5...
background-image は、おそらくすべてのフロントエンド開発者がキャリアの中で少なくとも...
この記事の例では、文字の出現回数をカウントするJavaScriptの具体的なコードを参考までに共有し...
1. Canvas画像をCSS背景画像として使用するCSS ペイント API は、Canvas キャ...
HTML でフォームの送信を無効にする方法は 2 つあります。 1. コントロールタグにreadon...
序文パブリック IP を持つ本番 VPS の場合、必要なポートのみが開かれ、IP とポートを制御する...
1. ダウンロードアドレス:参考: http://dev.mysql.com/downloads/m...
1. 概要ネットでいろいろ検索してみたところ、Linux システム向けではなく、現在の新しいバージ...
目次序文: 1. イベント ループとタスク キューの理由: 2. イベントループメカニズム: 3. ...
目次1. デカルト積現象2. 接続クエリの知識ポイントのまとめ1) 結合クエリとは何ですか? 2) ...
この記事では、JavaScriptでカルーセルを実装するための具体的なコードを参考までに紹介します。...