データ 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 ファイアウォール操作コマンドの完全なリスト
推薦する
Docker コンテナを他のサーバーに移行する 5 つの方法
多くの場合、移行は避けられません。ハードウェアのアップグレード、データ センターの変更、古いオペレー...
MySQL バックアップ スクリプトの書き方
序文：データベースのバックアップの重要性は、特にデータの損失が深刻な結果を招く可能性がある実稼働環境...
負の距離（共感） - 相互影響の反復プロセス
ネガティブな距離は共感を意味します。序文（疑問の提起）：プロダクトマネージャーは機能を把握します。機...
nginx プロキシ サーバーで双方向証明書検証を構成する方法
証明書チェーンを生成するスクリプトを使用して、ルート証明書、中間証明書、および 3 つのクライアント...
高可用性 Web クラスターを実装するための Keepalived+Nginx+Tomcat サンプル コード
高可用性 Web クラスターを実現する Keepalived+Nginx+Tomcat 1. Ngi...
mysql5.6.zip形式の圧縮版インストールグラフィックチュートリアル
はじめに: MySQL は、スウェーデンの MySQL AB によって開発されたリレーショナル デー...
Docker Compose を使用して Confluence を構築するチュートリアル
この記事は「Attribution 4.0 International (CC BY 4.0)」ライ...
MySQL はリレーショナルデータベースですか?
MySQL はリレーショナル データベース管理システムです。リレーショナル データベースは、すべて...
MySQLでMyISAMストレージエンジンをInnodbに変更した操作記録のまとめ
一般的に、MySQL はデフォルトでさまざまなストレージ エンジンを提供しており、次のように表示され...
MySQLクエリ速度が遅く、パフォーマンスが低下する原因と解決策
1. データベースクエリの速度に影響を与えるものは何ですか? 1.1 データベースクエリ速度に影響を...
Nginx ログ管理の概要
Nginx ログの説明アクセス ログを通じて、ユーザーの地理的起源、ジャンプ元、使用端末、特定の U...
CSSの使用に関する深い理解 clear:both
clear:both清除浮動これは私が常に持っていた印象ですが、私はこれをめったに使用せず、私の理...
jQueryはテーブル行データのスクロール効果を実現します
この記事の例では、テーブル行データのスクロール効果を実現するためのjQueryの具体的なコードを参考...
Linux7で仮想ホストを実装する3つの方法
1. 同じIPアドレス、異なるポート番号仮想ホスト 1: ホスト IP アドレスは 172.16.3...
MYSQL パフォーマンス アナライザー EXPLAIN 使用例分析
この記事では、例を使用して MYSQL パフォーマンス アナライザー EXPLAIN の使用方法を説...