base64原理浅析

更新日期: 2019-06-17阅读: 5.4k标签: base64

前言

上一次,我写了一篇《Data URL的简介与使用》(http://verymuch.site/2017/12/14/Data URL简介与使用/),该文章主要介绍了什么是Data URL,其优缺点以及如何使用。其中有一个隐含在文中的重要概念,那就是Data URL是Base64编码的,且Base64编码的数据体积通常是原数据的体积4/3。

不知道大家会不会有这样的疑问:

  1. 为什么图片转成Base64编码,就可以直接内联到html中显示呢?

  2. 为什么Base64编码后,体积会增大1/3呢?

如果你对此也有疑问的话,就往下一看究竟吧。


为什么Base64编码可以内联到HTML中?

我们知道HTTP协议是文本协议,不同于常规的二进制协议那样直接进行二进制传输。Base64编码是 从二进制到字符的过程,可用于在HTTP环境下传递较长的标识信息。


什么是Base64编码

首先Base64是一种编码算法,为什么叫做Base64呢?其实原因也很简单,是因为该算法共包含64个字符。包括大小写拉丁字母各26个、数字10个、加号 + 和斜杠 / ,共64个字符。此外还有等号 = 用来作为后缀用途。

字符与索引的对应关系如下图所示。


但,为什么Base64编码算法只支持64个字符呢?

首先,我们先回顾下ASCII码。ASCII码的范围是0-127,其中0-31和127是控制字符,共33个。其余95个,即32-126是可打印字符,包括数字、大小写字母、常用符号等。如下图所示,图片来源(https://zh.wikipedia.org/wiki/ASCII)。



早期的一些传输协议,例如邮件传输协议SMTP,只能传输可打印的ASCII字符。这样原本的8bit字节码(0-255)就会超出使用范围,从而导致无法传输。

这时,就产生了Base64编码,它利用 6bit字符来表达原本的8bit字符 。


Base64编码原理

上面我们知道了什么是Base64编码,知道了其包含的64个字符。它主要是通过6bit字符来表达原本的8bit字符。接下来我们一起学习下这一过程是如何进行的。

首先,6bit显然不够容纳8bit的数据。6和8的最小公倍数是24,所以我们用4个Base64字符刚好能够表示三个传统的8bit字符。如下所示,字符串 Man 的编码图解如下:


Man 的编码结果为 TWFu ,显然,Base64编码会多1/3的长度,这也解释了文中开头的疑问,为什么Base64编码后的体积会大1/3。

Man 这个字符串的长度刚好是3,我们能用4个Base64来表示。如果待编码的字符串长度不是三的倍数时应该怎么处理呢?

这是需要做一个特殊处理,假设待编码字符串长度为10。这前9个字符可以用12个Base64字符表示。第10个字符的前6bit作为一个Base64字符, 剩下的2bit后面需要先补0,补到6位(此处补4个0) 作为第二个Base64字符,至于第三个和第四个Base64字符,虽然没有相对应的内容,我们仍需 以 = 填充 

如下图所示, A 对应的Base64编码为 QQ== , BC 对应的Base64编码为 QkM= 。


最后的问题就是解码啦,解码的过程比较简单。 去掉末尾的等号 = 。剩下的Base64字符,每8bit组成一个8bit字节,最后剩余不足8位的丢弃即可。


总结

本文篇幅较短,旨在简单介绍Base64编码原理。相信看完之后,大家一定能够理解为什么Base64编码后体积会增大1/3,而不再是死记硬背这一特点。至少有这个收获就够啦。


关于奇舞周刊

《奇舞周刊》是360公司专业前端团队「 奇舞团 」运营的前端技术社区。关注公众号后,直接发送链接到后台即可给我们投稿。

编者按:本文作者高峰,360奇舞团前端工程师,W3C性能工作组/WOT工作组成员。 

原文  http://mp.weixin.qq.com/s


链接: https://www.fly63.com/article/detial/3790

javascript图片转换base64,以及如何将base64的数据转换成图片

这篇文章主要讲解通过原生js,将图片地址转换为base64格式后显示的方法,以及base64的图片数据如何转换为file文件并提交。

js实现字符串/base64的编码和解码

JavaScript对字符串/base64的编码和解码;Base64其实是一种简单的置换加密方式,但是BASE64的用处往往并不是为了防止信息泄露,而且为了方便传输,进过BASE64编码后的信息会比原始信息长,大概是4/3倍。

js原生Base64转码和解码函数btoa和atob的使用

javascript原生的api是支持,Base64的, window.btoa方法将普通字符串转为Base64字符串,window.atob将Base64字符串转为普通字符串,它们在现代浏览器中受到广泛的支持。

图片保存到本地_原生js实现base64图片下载

在项目开发过程中,经常会有图片导出的需求,原生js实现base64图片下载实现思路:需要创建a标签,然后把base64的图片转为为blob对象,再通过URL.createObjectURL方法复制给a标签的href属性,最后添加添加事件的方法。

利用PHP将图片转换成base64编码的实现方法

base64是当前网络上最为常见的传输8Bit字节代码的编码方式其中之一。base64主要不是加密,它主要的用途是把某些二进制数转成普通字符用于网络传输。由于这些二进制字符在传输协议中属于控制字符,不能直接传送,所以需要转换一下

原生 JS 的 Base64 转码

JavaScript 原生提供两个 Base64 相关的方法:btoa():任意值转为 Base64 编码,atob():Base64 编码转为原来的值。注意:这两个方法不适合非 ASCII 码的字符,会报错。

js base64的实现

base64是用规定的64种字符来表示任意二进制数据的一种编码格式,base64编码不提供加密,只是将一种形式的数据转化为另一种形式。Base64编码使用二进制表示,字符串的每一个字符由8个字节表示

Base64 编码与解码详解

Base64 是基于 64 个可打印字符 A-Z、a-z、0-9、+、/ 来表示二进制数据的表示方法,常用于数据在网络中的传输。本篇将分别介绍其编码、解码以及实际运用。

使用base64编码在页面嵌入图片

因为页面中插入一个图片都要写明图片的路径——相对路径或者绝对路径。而除了具体的网站图片的图片地址,如果是在自己电脑文件夹里的图片,当我们的HTML文件在别人电脑上打开的时候图片则由于地址不对或者没有将图片

图片上传转base64

做的过程中本来想用taro-ui里的那个图片上传,但是样式想自定义没搞定,结果后来就用Taro.chooseImage了。h5模式返回的是一个blob对象,然后自己转成base64了。微信小程序自己有方法。原来想用multipart的方式

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!