zoukankan      html  css  js  c++  java
  • Data URI scheme

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

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

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

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

    用法=>

    HTML:

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

    CSS:

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

    JavaScript:(IE8不支持)

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

    Link: http://www.cnblogs.com/farwish/p/3787980.html

  • 相关阅读:
    微信公众号Markdown编辑器, 适合代码排版
    Java8-如何构建一个Stream
    Java8-Stream之数值流
    Java8学习(4)-Stream流
    Dubbo学习1-Hello world
    深入理解JVM垃圾收集机制(JDK1.8)
    持久层框架JPA与Mybatis该如何选型
    淇℃伅 [main] org.apache.catalina.startup.VersionLoggerListener.log Server.鏈嶅姟鍣
    Apache Tomcat下载、安装、配置图文教程
    IIS8.0 配置应用程序初始化功能
  • 原文地址:https://www.cnblogs.com/farwish/p/3787980.html
Copyright © 2011-2022 走看看