データ 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 で group by を使用すると常にエラー 1055 が発生します (推奨)
MySQL で group by を使用すると常にエラー 1055 が発生するため、原因を確認する...
上位Nを見つけるためのMySQLグループソートの詳細な説明
MySQLグループソートで上位Nを見つけるテーブル構造grp でグループ化し、num で並べ替えて、...
一定時間後にNavicatがデータベースから自動的に切断される問題の解決方法
これは、データベース サーバーが、接続が多すぎるのを避けるために、一定時間非アクティブな状態が続くと...
Tomcat プロセスの CPU 使用率が高い場合のトラブルシューティング記録を記録する
この記事では主にTomcatプロセスを記録し、TCP接続が多すぎることによるCPU使用率の過剰のトラ...
Nginx の高同時実行最適化の実践
1. チューニングの必要性 私は、どのように書けばいいのか本当に分からないので、共有するために最適...
CentOS6.9 での MySQL 5.7.17 のインストールと設定のチュートリアル
CentOS6.9はMysql5.7をインストールします。参考までに、詳細は次のとおりです。 1. ...
MySQL の文字セット utf8 を utf8mb4 に変更する方法
MySQL 5.5 の場合、文字セットが設定されていない場合、MySQL のデフォルトの文字セットは...
Linuxファイアウォールiptablesの詳細な紹介、設定方法と事例
1.1 iptablesファイアウォールの概要Netfilter/Iptables (以下、Ipta...
Dockerのヘルス検出メカニズム
コンテナの場合、最も単純なヘルスチェックはプロセス レベルのヘルスチェックであり、プロセスが稼働して...
Vue フロントエンド開発における階層的にネストされたコンポーネント間の通信の詳細な説明
目次序文例まとめ序文Vue の親子コンポーネントは、props を通じて親コンポーネントの値を子コン...
JavaScript の new 演算子を自分で実装する方法
目次コンストラクタ新しいオペレーター自分で新しいものを実装するコンストラクタnew を導入する前に、...
Linux の非常に詳細な gcc アップグレード プロセス
目次序文1. 現在のgccバージョン2. gccをインストールする3.gmpのインストール4.MPF...
ウェブページのカラーマッチングにおけるオーバーラップとソフトカラーマッチングの手法を詳しく説明
この記事には、細かい点は一切なく、カラーマッチングのテクニックをシェアするだけです。とてもシンプルで...
25 個の CSS フレームワーク、ツール、ソフトウェア、テンプレートを共有
スプライトカウダウンロード CSS リントダウンロード プレフィックスダウンロード 1140px C...
CSS変数を使用してダークモードを実装するためのサンプルコード
最近、WeChatはAppleによってダークモードの開発を強制されました。ますます多くのウェブサイト...