首页 > 其他 > 详细

data url

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

data类型的url有以下几种形式: 
Java代码  bubuko.com,布布扣
  1. data:,<文本数据>  
  2. data:text/plain,<文本数据>  
  3. data:text/html,<HTML代码>  
  4. data:text/html;base64,<base64编码的HTML代码>  
  5. data:text/css,<CSS代码>  
  6. data:text/css;base64,<base64编码的CSS代码>  
  7. data:text/javascript,<Javascript代码>  
  8. data:text/javascript;base64,<base64编码的Javascript代码>  
  9. data:image/gif;base64,base64编码的gif图片数据  
  10. data:image/png;base64,base64编码的png图片数据  
  11. data:image/jpeg;base64,base64编码的jpeg图片数据  
  12. data:image/x-icon;base64,base64编码的icon图片数据  


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


以图片为例,生成此数据的伪代码为: 
Java代码  bubuko.com,布布扣
  1. // 定义存放图片字节  
  2. data[]  
  3. // 打开图片,内容放入data中  
  4. open(file_url, data)  
  5. // 分析图片信息  
  6. info = image_info(data)  
  7. // 图片类型  
  8. media_type = info.media_type  
  9. // 对图片内容进行base64编码  
  10. enc = base64(data)  
  11. // 最后按照格式拼接字符串  
  12. 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,布布扣,bubuko.com

data url

原文:http://www.cnblogs.com/daishuguang/p/3619232.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!