データ 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 ファイアウォール操作コマンドの完全なリスト
推薦する
CSS BEM 記述標準の詳細な説明
BEM は、Web 開発に対するコンポーネントベースのアプローチです。ユーザー インターフェイスを独...
中国における中国語ドメイン名の人気は新たなクライマックスを迎えた
<br />外交部などの中央政府機関、各レベルの地方政府、その他の国家機関や部門が率先し...
純粋なCSSを使用してスクロールシャドウ効果を実現します
端的に言うと、スクロール可能な要素には非常によくある状況があります。通常、スクロールすると、要素が現...
DockerHubを自分で構築する方法
先ほど使用したDocker HubはDockerによって提供されています。独自のDockerを構築す...
MySQL マスタースレーブレプリケーションの原理と注意点
前面に書かれた最近、Mycat で特別なトピックを書いています。最近、多くの友人が面接に出かけている...
Centos8でdockerがインストールできない問題の解決方法
問題 [root@zh ~]# [root@zh ~]# [root@zh ~]# yum -y d...
MySQL コマンドを使用してインデックスを作成、削除、およびクエリする方法の紹介
MySQL データベース テーブルでは、インデックスを作成、表示、再構築、削除できるため、クエリ速度...
MySQL 8.0.12 のインストールと設定のチュートリアル
この記事はMySQL 8.0.12のインストールと設定に関する詳細なチュートリアルを記録しています。...
Linux viコマンドの知識ポイントと使い方のまとめ
Linux viコマンドの詳しい説明vi エディタは、すべての Unix および Linux システ...
MySQLクエリキャッシュに関するヒント
目次序文QueryCache の概要クエリキャッシュ構成QueryCache の使用queryCac...
CentOS 上での MySQL 5.6 のコンパイルとインストール、および複数の MySQL インスタンスのインストールの詳細な説明
--1. mysql用の新しいグループとユーザーを作成する # ユーザー追加 -M -s /sbin...
JavaScript プロトタイプとプロトタイプチェーンの深い理解
目次1. プロトタイプとは何ですか? 2. プロトタイプ__プロト__ 4. コンストラクター5. ...
vue-cli で stimulsoft.reports.js を使用する詳細なチュートリアル
vue-cli は stimulsoft.reports.js を使用します (ナニーレベルのチュー...
React-Native環境のセットアップと基本的な紹介
環境の準備1. 環境構築React Native 中国語ウェブサイト2. 開発ツール フロントエンド...
WAMPにインストールするとMySQLが起動できるが、再起動後に起動できなくなる問題の解決方法
初めてwampをインストールした後、すべてのサービスが正常に使用できますが、再起動するとwampのア...