5

私は最近 Data URI スキームに出会い、 Wikipediaでそれについて読んでいました。

サンプルコードは次のようになります。

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUA
          AAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO
          9TXL0Y4OHwAAAABJRU5ErkJggg==" alt="Red dot">

iVBORw0KGgoAAAA...私の質問はこれです: Web サイトで使用するコード (IE: ) をどのように生成しますか?

注：サーバー側のスクリプトを使用せずにこれを行う方法を特に探しています。ただし、この質問に出くわす可能性のある他の人のために、サーバー側のスクリプトの方法を投稿することはできます。また、これを行うウェブサイトを見たことがありますが、どうすれば自分で行うことができますか?

4

4 に答える 4

2

ウィキペディアの記事から明確でない場合、データ URI は、ファイル (たとえば、png) のコンテンツ全体をテキスト リンクに押し込む方法にすぎません。多くの興味深い種類のファイルには、テキストとして表されないデータが含まれているため、スキームではbase64エンコーディングを使用して、可能なバイナリ データの全範囲をテキスト形式で表します。

さらに、ブラウザーが Web サーバーからファイルを取得する場合、Web サーバーはブラウザーにそのファイルの種類をMIME タイプの形式で伝えます。データ URI には、ファイルの種類を識別するための Web サーバー (またはファイル名さえも!) がないため、この情報を URI に含める必要があります。

于 2012-06-08T05:24:22.010 に答える
1

（まだコメントできないので、これを新しい回答として追加しています。）

Oran D. Lord's answerと同様に、これは Firefox でも動作するはずです:

  1. Firefox で画像ファイルを開きます (または画像のある Web ページを開きます)。
  2. 画像を右クリックし、「要素の検査」を選択します。
  3. インスペクタで、イメージ タグが強調表示されます。画像タグを右クリックして、[Copy Image Data-URL] を選択します (実際には URL ではないかもしれませんが、現在のメニュー エントリの名前はそれです)。
  4. 必要な場所にデータ URI を貼り付けます。
于 2015-10-21T16:04:53.913 に答える
-2

さらに読んだ後、信頼できるサイトからリンクされているWeb サイトに出くわしました。うまく機能し、HTML、CSS、および生データに挿入するためのコードを提供してくれます。私が見つけた非常に素晴らしく、最良の方法。ただし、データ URI 生成のためにアクセスしたサイトの一部が、Google または AVG によるマルウェアのためにブロックされたことに注意してください。これでも大丈夫そうです。

于 2012-06-10T07:24:22.410 に答える