`
flysnowxf
  • 浏览: 578740 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

html中data类型的url

阅读更多
针对于一些小的数据,可以在网页中直接嵌入,而不是从外部文件载入,比如图片。这样的好处是可以减少一次http的请求,缺点是使得页面内容变大。data类型的url格式在98年就已经提出了,现在绝大部分的浏览器都能支持,比如使用IE6内核的国内浏览器,chrome和firefox等,但IE8上使用有问题,图片显示不完整。

data类型的url有以下几种形式:
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图片数据


data类型的图片格式为:
<img src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAg...省略N个字节"/>


以图片为例,生成此数据的伪代码为:
// 定义存放图片字节
data[]
// 打开图片,内容放入data中
open(file_url, data)
// 分析图片信息
info = image_info(data)
// 图片类型
media_type = info.media_type
// 对图片内容进行base64编码
enc = base64(data)
// 最后按照格式拼接字符串
data_url = "data:" + media_type + ";base64," + enc


生成此数据的工具,你可以访问此网页试试http://dataurl.net/#dataurlmaker
参考:
http://hi.baidu.com/fegro/blog/item/c5492a0a0cb562bd2fddd45b.html
http://www.iteye.com/topic/1117213
分享到:
评论

相关推荐

    浏览器中的data类型的Url格式 data:image/png,data:image/jpeg!

    数据类型URL(Data URL Scheme)是一种在Web开发中用于嵌入小型数据块到HTML文档或CSS样式表中的方法。这种格式最初在1998年的RFC2397中被定义,目的是为了允许开发者直接在页面内包含小量的数据,而无需从外部文件...

    前端开源库-dataurl

    例如,将一张图片转换为Data URL,可以直接嵌入到HTML的`&lt;img&gt;`标签中,而无需通过HTTP请求获取。 2. **数据URL解析**:库提供了解析Data URL的能力,将Data URL分解为它的组成部分,如媒体类型(MIME type)、编码...

    multipartform-data 参数传递

    - 使用`encodeURIComponent`对`status`值进行编码,防止URL中的特殊字符引起问题。 - 最后调用`form2.submit()`提交表单。 #### 总结 本示例展示了一个典型的文件上传表单及其提交逻辑。需要注意的是,当没有选择...

    探究dataURI中使用SVG正确姿势

    在JavaScript中,我们可以使用Blob对象和URL.createObjectURL方法将SVG转换为dataURI,这对于动态生成SVG或在运行时修改SVG非常有用。以下是一个简单的示例: ```javascript let svgString = '...

    iPhone读取url内容demo

    在这个代码片段中,我们首先创建了一个URL对象,然后使用URLSession的shared实例创建了一个dataTask。这个task会在后台线程中执行,不会阻塞用户界面。当请求完成时,会回调闭包,其中包含数据、响应对象和可能的...

    HTML5图片dataURL转换工具.zip

    1. **dataURL**: dataURL由三部分组成:`data:`前缀、媒体类型(如image/jpeg)、逗号分隔后的内容编码。内容通常是Base64编码的图像二进制数据。dataURL可以避免网络延迟,使图像在页面加载时无需额外请求。 2. **...

    Data URI浅析

    然而,需要注意的是,Data URI适合较小的文件,因为过大的文件可能会导致浏览器性能问题或达到URL长度限制。 #### 总结 Data URI提供了一种简单有效的方式来嵌入小文件到HTML或CSS中,有助于优化网站性能。通过...

    Ext.data专题

    - **xmlData**: XML数据,通过URL附加参数的方式发起请求。 - **disableCaching**: 布尔值,指示是否禁用缓存。 ##### 其他功能 除了发送请求之外,**Ext.data.Connection** 还提供了其他一些实用的方法,如: - ...

    C#后台访问url请求结果

    - **url** (字符串类型):表示要访问的目标URL地址。 - **pars** (字符串类型):如果请求方式为POST,则此参数表示要发送的数据(通常为JSON格式);如果请求方式为GET,则此参数会被添加到URL后面作为查询字符串的...

    上传文件fileupload+解决enctype= multipart/form-data无法传递其他参数

    1. **HTML表单与文件上传**:在HTML中,要上传文件,表单的`enctype`属性必须设置为`multipart/form-data`。这样做的原因是,普通表单数据(如文本字段)是以URL编码的方式发送的,但文件数据需要更复杂的编码方式以...

    攻克Data动态获取网页评论,保存数据库

    因此,我们需要识别这些异步请求的URL和参数,通常可以通过浏览器的开发者工具中的网络面板查看。 3. **JSON解析**:许多动态加载的数据是以JSON格式返回的。JSON是一种轻量级的数据交换格式,易于人阅读和编写,...

    SpringDataJpa整合FreeMarker源码样例

    3. **创建Repository**:定义一个接口继承自Spring Data JPA提供的`JpaRepository`,并指定对应的实体类和主键类型。这样,Spring Data JPA会自动生成CRUD方法。 4. **配置FreeMarker**:在Spring Boot配置类中,...

    httpURL解析 doc

    在这个场景中,我们有两个与HTTP相关的函数,用于在MFC(Microsoft Foundation Classes)环境中执行HTTP请求:`HTTP_POST_DATA` 和 `HTTP_GET_DATA`。 `HTTP_POST_DATA` 函数用于执行POST请求,这是一种HTTP方法,...

    html引入html实例

    这里的`data`属性相当于`&lt;iframe&gt;`的`src`,指定要加载的HTML文件,而`type`属性则指定了数据类型。 另外,如果你希望实现的是页面之间的导航而不是直接嵌入,可以使用`&lt;a&gt;`标签的`href`属性链接到其他HTML文件。...

    html js 遍历一个文件夹里的指定类型的所有文件,查找文件夹中所有的html文件并可读取内容

    // 解析data URL,获取目录内容 // ... }; } ``` 4. 读取HTML内容:`readFileContent`函数会使用FileReader的`readAsText`方法读取HTML文件的内容。 ```javascript function readFileContent(file) { const ...

    java实现本地读取图片存储到数据库中并在html网页显示

    前端接收到图片的二进制数据后,可以通过`Blob`和`URL.createObjectURL()`将数据转化为URL,然后在HTML中设置`&lt;img&gt;`标签的`src`属性。例如: ```javascript let imgBlob = new Blob([response.data], {type: '...

    从URL里获取文件路径,显示swf文档

    在IT行业中,我们经常需要处理各种网络资源,其中包括从URL中获取文件路径并展示特定类型的文档,例如SWF(Shockwave Flash)文件。SWF是一种用于在网络上传输多媒体内容的格式,常见于早期的网页动画和游戏。这篇...

    【JavaScript源代码】vue3中各种类型文件进行预览功能实例.docx

    在Vue3中实现各种类型文件的预览功能是一项常见的需求,尤其在开发Web应用时,用户可能需要在不离开页面的情况下查看不同类型的文件。本文将详细介绍如何在Vue3项目中预览Office文档、PDF、图片、视频和音频文件。 ...

    oec-data-url-enumerate:枚举来自OEC网站的数据URL,以将其输入到aria2 URL文件中

    标题中的“oec-data-url-enumerate”是一个脚本或工具,主要用于从经济合作与发展组织(OECD,Organisation for Economic Co-operation and Development)的网站上检索数据URL。这个工具的作用是帮助用户批量获取...

Global site tag (gtag.js) - Google Analytics