データ URI スキームを使用して Web ページに画像を埋め込む方法の紹介
|
データ 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 バイナリパッケージのインストールとインストール不要版 Windows 設定方法
次のコードは、MySQL 5.7.22 バイナリ パッケージのインストール方法を紹介しています。具体...
HTML、CSS、JSコメントの標準的な使用法の概要
必要なコメントを追加することは、責任感と道徳心のあるフロントエンド開発者が持つべき良い習慣であり、コ...
ElementUI のネストされたテーブルに基づいて複数選択を実装するためのサンプル コード
序文：私は友人のプロジェクトのバグを修正するのを手伝ったのでこれを書きました。この関数を書くのは初め...
Linux で MySQL 5.7.19 をアンインストールする方法
1. MySQLが以前にインストールされていたかどうかを確認するコマンド: rpm -qa|grep...
JavaScript サンドボックスの探索
目次1. シナリオ2. サンドボックスの基本機能3. iframeの実装4. Webワーカーの実装5...
CSS 背景画像を設定するための 6 つの興味深いヒント
background-image は、おそらくすべてのフロントエンド開発者がキャリアの中で少なくとも...
JavaScriptは文字の出現回数をカウントします
この記事の例では、文字の出現回数をカウントするJavaScriptの具体的なコードを参考までに共有し...
CSS ペイント API: CSS のような描画ボード
1. Canvas画像をCSS背景画像として使用するCSS ペイント API は、Canvas キャ...
HTML フォーム コントロールの無効な属性の読み取り専用と無効の概要
HTML でフォームの送信を無効にする方法は 2 つあります。 1. コントロールタグにreadon...
LINUX での IPTABLES ファイアウォールの基本的な使用方法のチュートリアル
序文パブリック IP を持つ本番 VPS の場合、必要なポートのみが開かれ、IP とポートを制御する...
MySQL 5.7.20 圧縮版のダウンロードとインストールの簡単なチュートリアル
1. ダウンロードアドレス:参考: http://dev.mysql.com/downloads/m...
MySQL 5.7.17 無料インストールバージョンの設定方法グラフィックチュートリアル (Windows10)
1. 概要ネットでいろいろ検索してみたところ、Linux システム向けではなく、現在の新しいバージ...
JavaScriptのイベントループの仕組みの分析
目次序文： 1. イベント ループとタスク キューの理由: 2. イベントループメカニズム: 3. ...
MySQLシリーズ マルチテーブル結合クエリ92および99構文例詳細チュートリアル
目次1. デカルト積現象2. 接続クエリの知識ポイントのまとめ1) 結合クエリとは何ですか? 2) ...
ネイティブJavaScriptでカルーセルを実装する
この記事では、JavaScriptでカルーセルを実装するための具体的なコードを参考までに紹介します。...