検索

-----------------------------------------------------------------------------------------------

Data URI scheme is a URI scheme(统一资源定位符的模式)。

我们熟知的站点引用资源文件,都是类似http://www.chenwei.ws/demo.png这种的格式,但是data URI scheme 提供将外部资源嵌入到网页中的方法。

它是一种文件或文档的形式,这项技术允许普通的元素诸如要取的图片,样式表放在单一的http请求中,替代很多http请求。(相当于变成网页的一部分了)

------------------------------@author chenwei --------------------

用法=>

HTML:

<span><</span><span>img </span><span>src</span><span>="data:image/png;base64,iVBORw0Rw0KGgoAA......"</span><span>></span>

CSS:

<span>div </span>{<span>background</span>:<span> red url('data:image/png</span>;<span>base64,iVBORw0Rw0KGgoAA......') no-repeat scroll left top;</span>}

JavaScript:(IE8不支持)

<script><span>
window.open(</span>'data:text/html;charset=utf-8,' +<span> encodeURIComponent(
    </span>'<!doctype html>' +
    'html lang='en'<span> +
    </span>'<head><title>Embedded Window</title></head>'<span> +
    </span>'<body><h2 id="">42</h2></body>'<span> +
    </span>'</html>'
<span>  );
</span></script>

data 表示数据名称,image/png 是数据类型名称; base64 是数据编码方法,后面是base64编码后的数据。

Data URI scheme支持的类型有:
data:,文本数据
data:text/plain,文本数据
data:text/html,HTML代码
data:text/html;base64,base64编码的HTML代码
data:text/css,CSS代码
data:text/css;base64,base64编码的CSS代码
data:text/javascript,Javascript代码
data:text/javascript;base64,base64编码的Javascript代码
data:image/gif;base64,base64编码的gif图片数据
data:image/png;base64,base64编码的png图片数据
data:image/jpeg;base64,base64编码的jpeg图片数据
data:image/x-icon;base64,base64编码的icon图片数据

 

注:PHP中可以用函数base64_encode()进行编码,base64_encode(file_get_contents('demo.png'));

复制下面数据到浏览器中,看看是什么吧。

data:text/plain;base64,d3d3LmNoZW53ZWkud3M=

-----------------------------------------------------------------------------------------------

参考Wiki: http://en.wikipedia.org/wiki/Data:_URL

声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

Video Face Swap

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

ホットツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

mPDF

mPDF

mPDF は、UTF-8 でエンコードされた HTML から PDF ファイルを生成できる PHP ライブラリです。オリジナルの作者である Ian Back は、Web サイトから「オンザフライ」で PDF ファイルを出力し、さまざまな言語を処理するために mPDF を作成しました。 HTML2FPDF などのオリジナルのスクリプトよりも遅く、Unicode フォントを使用すると生成されるファイルが大きくなりますが、CSS スタイルなどをサポートし、多くの機能強化が施されています。 RTL (アラビア語とヘブライ語) や CJK (中国語、日本語、韓国語) を含むほぼすべての言語をサポートします。ネストされたブロックレベル要素 (P、DIV など) をサポートします。

SAP NetWeaver Server Adapter for Eclipse

SAP NetWeaver Server Adapter for Eclipse

Eclipse を SAP NetWeaver アプリケーション サーバーと統合します。

SublimeText3 Linux 新バージョン

SublimeText3 Linux 新バージョン

SublimeText3 Linux 最新バージョン

EditPlus 中国語クラック版

EditPlus 中国語クラック版

サイズが小さく、構文の強調表示、コード プロンプト機能はサポートされていません