Base64基本原理及简单应用
1.什么是Base64
Base64是一种基于64个可打印字符来表示二进制数据的编码方式,是从二进制数据到字符的过程。
原则上,计算机中所有内容都是二进制形式存储的,所以所有内容(包括文本、影音、图片等)都可以用base64来表示。
2.Base64编码原理
Base64编码之所以称为Base64,是因为其使用64个字符来对任意数据进行编码,同理有Base32、Base16编码。标准Base64编码使用的64个字符为:
有点特殊的是最后两个字符,因对最后两个字符的选择不同,Base64编码又有很多变种,比如用于编码URL的Base64 URL编码。
Base64编码本质上是一种将二进制数据转成文本数据的方案。对于非二进制数据,是先将其转换成二进制形式,然后每连续6比特(2的6次方=64)计算其十进制值,根据该值在上面的索引表中找到对应的字符,最终得到一个文本字符串。
假设我们要对 Hello! 进行Base64编码,按照ASCII表,其转换过程如下图所示:
可知 Hello! 的Base64编码结果为 SGVsbG8h,每3个原始字符经Base64编码成4个字符。那么,当原始字符串长度不能被3整除时,怎么办呢?
以 Hello!! 为例,其转换过程为:
Hello!! Base64编码的结果为 SGVsbG8hIQAA。可见,不能被3整除时会采用来来补0的方式来完成编码。
需要注意的是:标准Base64编码通常用 = 字符来替换最后的 A,即编码结果为 SGVsbG8hIQ==。因为 = 字符并不在Base64编码索引表中,其意义在于结束符号,在Base64解码时遇到 = 时即可知道一个Base64编码字符串结束。
3.Base64编码应用
就前端而言,对于一些简单的图片,为了减少外部资源加载,降低页面加载时间,可以采用base64将图片编码成字符串,直接内嵌到页面中。这种内嵌方式的实现,得益于大部分浏览器对Data URI scheme
特性的支持,该特性通常会在CSS设置背景图片时用到,其格式为:
background:url(data:文件类型;编码方式,编码后的文件内容);
也可通过img
标签嵌入图片:
<img alt="base64 image" src="data:文件类型;编码方式,编码后的文件内容" />
下面说下具体使用方法(以icon图标为例):
- 下载或制作所需图标;
- 使用base64在线编码工具,将图标编码成字符串;
- 将得到的字符串复制到你的前端代码中使用(例如background:url(字符串))
4.适用场景
一般适用于比较小、色彩层次单一的图片(如icon图标),不要试图用于色彩丰富的较大图片,尽管能够实现展现,但由于编码后的字符串非常大,会明显增大HTML/CSS文件的大小,影响加载速度。
本文学习网上资料整理而来,仅供个人学习使用,部分内容仅代表个人理解及思考。
主要参考:
http://blog.xiayf.cn/2016/01/...
http://blog.csdn.net/zdy0_200...
Base64基本原理及简单应用相关推荐
- STP生成树协议与MSTP的基本原理与简单配置
STP生成树协议与MSTP的基本原理与简单配置 环路引起的问题 为什么要有生成树协议 BPDU 网桥协议数据单元 选举根交换机的原则 端口角色 端口状态描述 选举根端口指定端口的规则 RSTP:快速生 ...
- 爬虫之基本原理及简单使用、请求库之requests库及小案例
文章目录 1.基本原理及简单使用 1.1.定义 1.2.爬虫的基本流程 1.3.请求与响应 1.4.Request 1.5.Response 1.6.总结 2.请求库之requests库 2.1.基本 ...
- 量化交易中VWAP/TWAP算法的基本原理和简单源码实现(C++和python)(转)
量化交易中VWAP/TWAP算法的基本原理和简单源码实现(C++和python) 原文地址:http://blog.csdn.net/u012234115/article/details/728300 ...
- 【Java】 Base64原理及简单应用
Base64是一种8位字节代码的编码方式,用于将字节码转换为可见字符的形式进行数据传递.在网络数据传递的时候,并不是所有的字节都可以在在网络中传递.比如对于图片中的二进制流中存在终止符就可能导致数据传 ...
- PBR材质:基本原理和简单制作
概要:介绍PBR材质的基本原理以及制作一个简单的PBR材质 参考资料:BASIC THEORY OF PHYSICALLY-BASED RENDERING 如有问题,多多指正. 侵删. 1.PBR是什 ...
- img图片转码base64使用(简单版)
使用接口传数据时img可以使用base64转码后传给后台,文笔不行直接上代码和效果图 没查资料不知道什么版本可行可不行 看效果图 <input type="file" onc ...
- 量化交易中VWAP/TWAP算法的基本原理和简单源码实现(C++和python)
参考文献: https://en.wikipedia.org/wiki/Time-weighted_average_price https://en.wikipedia.org/wiki/Volume ...
- Cache的基本原理以及简单操作
对于没有接触过底层技术的朋友来说,或许从未听说过cache.毕竟cache的存在对程序员来说是透明的.在接触cache之前,先为你准备段code分析. int arr[10][128];for (i ...
- Java中UDP协议的基本原理和简单用法
UDP协议是非面向连接的,相对于TCP协议效率较高,但是不安全.UDP协议类似发信息的过程,不管接收方是在线还是关机状态,都会把信息发送出去.但是如果接收方不处于接收信息的状态,发送出去的数据包就会丢 ...
- ucore和linux区别,附录 - 附录A—ucore历史 - 《操作系统的基本原理与简单实现》 - 书栈网 · BookStack...
ucore历史 写一个教学OS的初衷是陈渝老师和向勇老师想参考MIT的xv6/JOS开发一个能够与OS课程教材相配套的OS实验环境.没有直接采用xv6/JOS的原因是当时(2008年)xv6没有完整的 ...
最新文章
- cookie用法之一,最简单cookie操作
- 淘宝二面,面试官居然把TCP三次握手问的这么详细
- 宏基ec471g黑苹果_宏碁acer ec-471g 黑苹果配置教程
- 大数据与智能算法(三-集疏运应用)-SMU在线学习笔记
- 【推荐】LSI(latent semantic indexing) 完美教程
- windows下安装gevent
- python时间差转换成天数_Python实现计算两个时间之间相差天数的方法
- ubuntu14.04 boost动态库找不到 libboost_system.so.1.58.0
- mysql游标遍历数据库_MySQL数据库中,使用游标循环遍历_MySQL
- C++学习_第1章_从C到C++
- 华为Mate 40 Pro最新渲染图曝光:后置相机模组有变化
- Java多线程学习总结(3)——Java线程的6种状态及切换
- 尝试OUTFIle、INFILE快速导入导出数据
- 用python计算圆柱体积
- 用纯CSS实现优雅的tab页
- 基于 Python 的时序模型——AMIRA模型
- 获取微信昵称时 过滤特殊字符
- SQL Server Check检查约束用法
- 马来西亚理科大学计算机专业雅思,【马来西亚理科大学本科雅思成绩要求】 - 马来西亚留学联盟...
- java输入菱形边长,输出菱形