データ 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の4種類の配置の違いの詳細な説明
フロントエンド開発でよく使われるCSSの配置方法は、位置決めには、通常位置決め、相対位置決め、絶対位...
HTML外部参照CSSファイルが効果を発揮しない理由の分析と解決
フロントエンドの初心者として、私は数日間フロントエンドをいじってみました。 。今日、私は自分が固く信...
Linux システムのユーザー管理コマンドの概要
ユーザーとグループの管理1. ユーザーとグループの基本概念ユーザーとグループ:システム上のすべてのプ...
Vue フロントエンド開発補助機能状態管理詳細例
目次マップ状態マップゲッターマップミューテーションマップアクション例まとめマップ状態コンポーネントが...
MySQL 8.0 における非同期レプリケーションの 3 つの方法について簡単に説明します。
この実験では、空のデータベース、オフライン、オンラインの 3 つのモードで、1 つのマスターと 2 ...
Mysql の mysql.user ユーザー テーブルの詳細な説明
MySQL は、異なるユーザーに異なる権限を割り当てることができるマルチユーザー管理データベースであ...
CocosCreator MVCアーキテクチャの詳細な説明
概要この記事では、ゲームクライアントでよく使用される MVC アーキテクチャについて紹介します。ゲー...
MySQL データ型における DECIMAL の使用法の詳細な説明
MySQL データ型における DECIMAL の使用法の詳細な説明MySQL のデータ型には、INT...
SQL 最適化チュートリアル: IN クエリと RANGE クエリ
序文「High Performance MySQL」では、インデックスでは範囲フィールドの後の部分が...
vue-simple-uploader をベースに、ファイルセグメントアップロード、インスタントアップロード、ブレークポイント再開のグローバルアップロードプラグイン機能をカプセル化します。
目次1. はじめに2. vue-simple-uploaderについて3. vue-simple-u...
HTML/XHTML における img 画像タグの基本的な使用法の詳細な説明
画像タグは、Web ページに画像を表示するために使用されます。 HTML/XHTML 画像 <...
mysql order by in の文字順序の詳細な説明 (推奨)
//MySQL ステートメント SELECT * FROM `MyTable` WHERE `id...
フロントエンドとバックエンドを分離した nginx 構成を展開するための完全な手順
序文決まり文句です。ここでは、フロントエンドとバックエンドの分離についての私の理解についてお話ししま...
Linux で killall コマンドを使用してプロセスを終了する 8 つの例
Linux コマンドラインには、プロセスを強制終了するためのコマンドが多数用意されています。たとえば...
ネイティブ JS を使用してタッチスライド監視イベントを実装する方法
序文今日はちょっとしたデモを書きました。左右にスワイプするロジックに関わる部分があります。当初はプラ...