在网页中嵌入Base64编码文件
大家可能注意到了,网页上有些图片的src或css背景图片的url后面跟了一大串字符,比如:data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAAAEAAAAkCAYAAABIdFAMAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAHhJREFUeNo8zjsOxCAMBFB/ KEAUFFR0Cbng3nQPw68ArZdAlOZppPFIBhH5EAB8b+Tlt9MYQ6i1BuqFaq1CKSVcxZ2Acs6406KUgpt5/ LCKuVgz5BDCSb13ZO99ZOdcZGvt4mJjzMVKqcha68iIePB86GAiOv8CDADlIUQBs7MD3wAAAABJRU5ErkJggg%3D%3D。那么这是什么呢?这是Data URI scheme。
Data URI scheme是在RFC2397中定义的,目的是将一些小的数据,直接嵌入到网页中,从而不用再从外部文件载入。比如上面那串字符,其实是一张小图片,将这些字符复制黏贴到火狐的地址栏中并转到,就能看到它了,一张1X36的白灰png图片。
在上面的Data URI中,data表示取得数据的协定名称,image/png 是数据类型名称,base64 是数据的编码方法,逗号后面就是这个image/png文件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图片数据
base64简单地说,它把一些 8-bit 数据翻译成标准 ASCII 字符,网上有很多免费的base64 编码和解码的工具,在PHP中可以用函数base64_encode() 进行编码,如echo base64_encode(file_get_contents(‘wg.png’));
目前,IE8、Firfox、Chrome、Opera浏览器都支持这种小文件嵌入。
举个图片的例子:
网页中一张图片可以这样显示:
也可以这样显示:
我们把图像文件的内容直接写在了HTML 文件中,这样做的好处是,节省了一个HTTP 请求。坏处呢,就是浏览器不会缓存这种图像。
在线转换为Base64编码网站:
http://www.motobit.com/util/base64-decoder-encoder.asp
http://www.vgot.net/test/image2base64.php
转载于:https://www.cnblogs.com/PeunZhang/articles/2998462.html
在网页中嵌入Base64编码文件相关推荐
- 在网页中嵌入任意字体的解决方案 (insert any font)
字体使用是网页设计中不可或缺的一部分.经常地,我们希望在网页中使用某一特定字体,但是该字体并非主流操作系统的内置字体,这样用户在浏览页面的 时候就有可能看不到真实的设计.美工设计师最常做的办法是把想要 ...
- linux解码base64工具,如何解码Linux中的base64编码行?(How do I decode base64 encoded lines in linux?)...
如何解码Linux中的base64编码行?(How do I decode base64 encoded lines in linux?) 我正在尝试读取文件并仅提取base64编码部分. 我通过使用 ...
- woff, 在网页中嵌入任意字体的解决方案
woff, 在网页中嵌入任意字体的解决方案 http://topic.csdn.net/u/20110705/10/98e79aba-1ddf-42fa-84a9-b79ec494cb69.html ...
- 如何在网页中嵌入自己想要的字体(实例下载)
记得以前在国外那些人的网站看到那些字体怎么那么漂亮.而且不像电脑里面自带的字体.原来是通过这个方法来实现的.厉害,我觉得中文那些比较好看的字体,如果能都看到那该多好,不过看中文的TTF字体10M左右. ...
- 【ASP.NET】网页中嵌入视频
[ASP.NET]网页中嵌入视频 <!-- <rdf:RDF xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#&quo ...
- 第七章 在网页中嵌入多媒体内容
7.1 概述 常用多媒体标记: 标记 描述 <marquee> 设置文字等对象在页面中的滚动效果 <embed> 在页面中嵌入MP3.视频等多媒体内容 <applet&g ...
- C# 证书 .cer, .pfx 创建,加解密 导出为 Base64编码文件
RSA加密解密:私钥解密,公钥加密. 使用的命名空间: using System.Security.Cryptography; using System.Security.Cryptography ...
- Python实现jpg/png/jpeg图片转base64编码文件
python实现图片转base64编码文件 #Python实现jpg/png/jpeg图片转base64编码文件 # 打开图片文件(可以是jpg/png/JPEG格式)转为二进制文件 with ope ...
- 网页中嵌入视频播放器代码
有时候我们会有这样的需求,在网页中嵌入视频播放器,以播放我们的服务器端的视频,下面我将代码贴出来: 嵌入快播播放器: <table width="100%" align=&q ...
最新文章
- mysql中的float_mysql里float是什么东西
- PMP-【第3章 项目管理过程】-2021-1-11(61页-87页)
- 一次编译libmono.so的记录
- Unity中Quaternion的含义及其使用
- Google的Project Stream准备在Chrome中播放AAA控制台游戏
- 塔菲克蓝牙适配器驱动_小身材,大功能,biaze毕亚兹USB蓝牙适配器开箱体验
- 多路RTSP-RTMP转RTMP定制版
- [转]:tbox中数据库的使用
- 如何搞定知乎模拟登陆的加密难题?
- 普通用户通过Putty密钥方式登录
- OpenStack实验:创建虚拟机的问题
- 安卓java游戏模拟器_Java手机游戏模拟器
- iOS 修改系统定位(非越狱)
- 网络存储学习之网络存储技术的发展现状及趋势
- 基于ricequant神经网络量化交易
- 新一代XSS平台(送邀请码)
- ie input兼容 vue_vue+iview 兼容IE11浏览器的实现方法
- 用python写情书_《使用Python进行自然语言处理》学习笔记一 | 学步园
- verilog中always和initial的区别
- 新浪云node加mysql_通过新浪云部署NideShop微信小程序商城(基于Node.js+MySQL+ThinkJS)...
热门文章
- 老实人一般容易吃亏,但是老实人遇到的机会比别人多一点点!
- 实体与电商,有啥区别?
- “画大饼”行走江湖的必备技能
- 构建第一个fabric网络
- mysql在jsp的导包语句_JSP+MYSQL中如何正确使用JDBC包?
- aws s3 cli_了解AWS CLI –使用AWS CLI与AWS S3存储桶进行交互
- 学习SQL:INFORMATION_SCHEMA数据库
- request获取各种路径记录
- uiautomatorviewer报错“Error taking device screenshot: EOF” ,
- 读取配置文件(configparser,.ini文件)