`
wangym
  • 浏览: 124705 次
  • 性别: Icon_minigender_1
  • 来自: 杭州
社区版块
存档分类
最新评论

运用Data URI scheme规范展现图片

阅读更多

先来个小演示,将如下代码全部复制,然后粘贴到Chrome或Firefox等浏览器的地址栏内并打开:

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAHgAAAB4AQAAAAARHwt/AAAAq0lEQVR42u3VQQrEMAgFUMFrCV5d8FpC55tQaGYx4J9t00L6upCoSSvXOeT1t0NEM7Qnytl3+JooB8KZ98Tb8y9nOW/cJXrkN/GqJ5Zz1HfgNUrP/g4c4h3M73ymvgrPHmKks0xwmZdS7nUEiD3B2ayzEb/7MXSPsG4J525kIZl8nMeJ93kyrMo5oyC1W0p772neCCb9RaDcr0xDH+dr4q4nEHe8qd//yQ9/AIx/XBg3tuj2AAAAAElFTkSuQmCC

可看到一张120X120的PNG格式图片,当然也可将上述代码置于 <img src="" /> 等HTML标签内。

 

这种规范就是Data URI scheme,见:https://en.wikipedia.org/wiki/Data_URI_scheme 它的格式如下:

data:[<MIME-type>][;charset=<encoding>][;base64],<data>

所以上述代码中,“data:image/png;base64,”之后的文本是对图片字节流进行Base64后的字符串。
当然,根据“MIME-type”还可以展现更多其它格式的内容。

 

应用场景:
运用Data URI scheme规范展现图片可以减少网络请求,我认为特别适合用于一些体积较小的图片展现,如1X1的图片占位符等修饰性的图片。但也需要关注浏览器的兼容性以及Base64之后的字符串长度等问题。

 

分享到:
评论

相关推荐

    .net 图片base64编码 Data URI scheme

    Data URI Scheme是一种URI(统一资源标识符)方案,它允许在单个URI中包含资源的数据,而不是提供指向资源的地址。其基本格式如下: ```text data:[][;base64],&lt;data&gt; ``` 其中,`&lt;mediatype&gt;`是资源的MIME类型,...

    Data URI scheme详解和使用实例及图片base64编码实现方法

    一、 Data URI scheme 简介 Data URI scheme是在RFC2397中定义的,目的是将一些小的数据,直接嵌入到网页中,从而不用再从外部文件载入。比如上面那串字符,其实是一张小图片,将这些字符复制黏贴到火狐的地址栏中并...

    探究dataURI中使用SVG正确姿势

    dataURI是一种URL scheme,它允许在单一的URL内直接包含文件内容。其基本格式如下: ``` data:[][;base64],&lt;data&gt; ``` mediatype是数据类型,如image/svg+xml;base64是一个可选的编码方式,用于对数据进行编码。...

    小议Data URI scheme及其在CSS中的相关使用

    数据URI方案(Data URI scheme)是一种在Web开发中用于嵌入小型数据,如图片或图标,直接在HTML或CSS代码中的技术。这种方法可以减少HTTP请求的数量,从而提高页面加载速度,因为不再需要单独请求外部资源。以下是...

    android:scheme 通过uri跳转到APP应用指定Activity

    在Android开发中,`android:scheme` 是一个关键的概念,用于构建自定义URL协议,使得外部应用或系统可以通过特定的URI来启动我们的应用程序中的特定Activity。这个特性在很多场景下非常有用,比如分享链接、广告点击...

    Data URI和MHTML完整解决所有浏览器

    Data URI(Data URL Scheme)是一种在文档中直接内联数据的机制,根据RFC 2397定义。它通过将文件数据编码成特定格式(通常是base64或URL编码),然后以`data:`开头的URI形式插入到HTML、CSS或JavaScript中。Data ...

    js 显示base64编码的二进制流网页图片

    第二种则是使用Data URI scheme直接在标签中嵌入Base64编码后的图片数据,如下所示:&lt;img src="data:image/gif;base64,R0lGODlhAgACAIAAAP///wAAACwAAAAAAgACAAACAoRRADs=" /&gt;。这种方式可以节省HTTP请求,但需要...

    android 根据uri获取真实路径

    - 如果`Uri`没有scheme(即`scheme == null`),那么直接返回`uri.getPath()`。 - 这种情况一般较少见,但为了代码健壮性考虑,也需要做相应的处理。 4. **处理FILE Scheme**: - 当`Uri`的scheme为`file`时,...

    android图片文件的路径地址与Uri的相互转换方法

    Android 图片文件的路径地址与 Uri 的相互转换方法 Android 开发中常遇到的问题之一是图片文件的路径地址与 Uri 之间的相互转换。这个问题可能会让许多开发者感到困惑和不知所措。下面我们将详细介绍如何将图片文件...

    nim-datauri:数据URI Base64 UTF-8 Nim模块

    nim-datauri是Nim编程语言的一个模块,专为处理数据URI提供便利,支持Base64编码和UTF-8字符集。 Nim是一种静态类型的、编译型的、命令式的、表现力极强的通用编程语言。它的设计目标是高效率、优雅的语法和灵活性...

    DataURL_生成工具_网页版_英文版

    DataURL(Data URI Scheme)是URI(Uniform Resource Identifier)的一种特殊形式,它由"data:"前缀、媒体类型、分隔符";"以及经过Base64编码的数据组成。例如,一个简单的DataURL可能看起来像这样: ``` data:...

    Data URI Maker-crx插件

    数据URI(Data URI Scheme)是一种在网页中内嵌小文件的方式,它允许将图像、音频、视频等资源的二进制数据直接编码成一个URI(统一资源标识符),从而避免了额外的HTTP请求。`Data URI Maker-crx` 插件就是针对这个...

    有图片预览功能的上传表单.rar

    这个解决方案可能利用了ActiveX对象或者JavaScript的Data URI Scheme,这是一种将文件数据编码为URI的方式,使得可以在页面上直接显示。当用户选择一个图片文件后,代码会读取文件内容并将其转换为Base64编码的字符...

    Scheme跳转的demo

    当一个应用希望监听并响应特定scheme的意图(Intent)时,需要在manifest中声明一个,并设置类别(action)为"android.intent.action.VIEW",数据类型(data)为自定义的scheme。例如: ```xml &lt;data ...

    android:scheme

    在Android开发中,`android:scheme` 是一个关键的概念,用于定义自定义URL协议,使得外部应用程序或系统可以通过特定的URI来启动我们的应用程序中的特定Activity。这个特性在很多场景下非常有用,比如实现点击链接...

    php实现图片以base64显示的方法

    这是在RFC2397中定义的Data URI scheme,目的是将一些小的数据,直接嵌入到网页中,从而不用再从外部文件载入,比如上面那串字符,其实是一张图片,将这些字符复制黏贴到火狐的地址栏中并转到,就能看到了。...

    URl Scheme的使用以及回调

    1. **注册URL Scheme**:在AndroidManifest.xml文件中,使用标签声明自定义的 scheme 和 host,如 `&lt;data android:scheme="testa" /&gt;`。 2. **处理Intent**:在目标Activity中,通过覆写`onCreateIntent()`方法来...

Global site tag (gtag.js) - Google Analytics