データ 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 ファイアウォール操作コマンドの完全なリスト
推薦する
CentOS7.5にHarbor1.7をインストールして設定するプロセス全体
1. 必要なパッケージをダウンロードする wget -P /usr/local https://st...
Dockerはelasticsearchイメージを起動し、ディレクトリをマウントした後にエラーを解決します
docker hub から es イメージ (バージョン 6.4.2) をダウンロードしました。詳細...
Linuxドライバのプラットフォームバスの詳細説明
目次1. プラットフォームバスの紹介1.1. Linuxドライバの分離と階層化1.1.1. Linu...
ドラッグフォトウォールを実現するネイティブJS
この記事では、ネイティブ JS で実装されたドラッグ可能な写真ウォールを紹介します。効果は次のとおり...
mysql5.7.20 のインストールと設定方法のグラフィック チュートリアル (mac)
MySQL 5.7.20のインストールと設定方法のグラフィックチュートリアルをあなたと共有します1...
Linux で特定のユーザーまたはユーザー グループに対して SSH を有効または無効にする方法
会社の基準により、特定のユーザーだけに Linux システムへのアクセスを許可することができます。あ...
Tomcat マルチレイヤーコンテナの設計に関する簡単な説明
目次コンテナ階層サーブレットの検索を要求するプロセス仕組みTomcat のコンテナは Servlet...
Linux で ffmpeg をインストールするための詳細なチュートリアル
1. CentOS Linuxにffmpegをインストールする1.ダウンロードして解凍する http...
MySQL データベースの基礎を始めるための一般的なコマンドの概要
この記事では、MySQL データベースの基礎を学ぶためによく使用されるコマンドを例を使って説明します...
Mysql sql スロークエリ監視スクリプトコード例
1. my.cnfを変更する #全体的な効果としては、グローバルがオンになっている場合はテーブルとロ...
コンポーネントベースのフロントエンド開発プロセスの詳細な説明
背景<br />フロントエンドを担当する学生は、ページが多すぎると煩雑になるため、開発プ...
CSS3 のエラスティック レイアウトでの em の使用の概要: 1em は何ピクセルですか?
私は長い間 CSS を使用してきましたが、Web 要素の関連属性を設定するために常に「px」を使用し...
CentOS7 システムでスワップを増やす方法の例
序文スワップは、ディスク上にある「仮想メモリ」の一部である特殊なファイル (またはパーティション) ...
JavaScript で虫眼鏡の特殊効果を実現
達成される効果：マウスを小さな画像の上に置くと、小さなブロックが小さな画像の上に表示され、この小さな...
Linux で cmake を使用して MySQL をコンパイルおよびインストールするための詳細なチュートリアル
1. cmakeをインストールする1. cmakeの圧縮パッケージを解凍する [root@mysql...