二进制的数据,每个字符的取值范围都是 [0, 255] ,作为ascii码解析时,只有部分可打印。
比如,我用文本编辑器vim打开一张jpeg图片,会发现内容是乱码。以下是头两行数据:
ÿØÿà^@^PJFIF^@^A^A^@^@^A^@^A^@^@ÿÛ^@C^@^F^D^E^F^E^D^F^F^E^F^G^G^F^H
^P
我在vim下输入 :%!xxd ,可以查看二进制数据对应的十六进值。以下是头两行数据:
00000000: ffd8 ffe0 0010 4a46 4946 0001 0100 0001 ......JFIF......
00000010: 0001 0000 ffdb 0043 0006 0405 0605 0406 .......C........
注意,下面的两行和上面的两行内容长度不一定是相同的。上面的数据是遇到ascii码为换行时换行,下面的数据是每16个字节换行。
比较上下两份数据,可以看到 JFIF 在上面也打印了,在下面的右半部分也打印了。说明他们的数据源确实是同一份,只是展示方式不同。
显然,如果我想肉眼看这份二进制数据,或者说作为文本拷贝这份数据,16进制的格式要优于二进制ascii码格式。
但是,16进制表示法,需要两个字节才能表示表示原始数据的一个字节。比如 4a464946 表示 JFIF 。即大小增加了一倍。
有点大?于是,有人发明了base64算法。它保持了编码后可打印特性的同时,大小只增加 1/3。
base64将原始二进制数据每三个字节(也即24位)看成一个单元,然后将24位按每6位进行一次切割,切割成4个字节。切割后每个字节的范围是 [0, 63] 。
由于 [0, 63] 的ascii码也并不都是可打印的,于是将 [0, 63] 再一一对应换算成一个可打印的字符。
标准文档 RFC 4648 对该映射关系定义如下:
ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/"
也即0对应A,1对应B,63对应 / 。
换算之后,三个字节就变成可打印的四个字节的内容了。
解码方的逻辑,先将每个可打印的字符按刚才的映射表反算出对应的值。然后每4个字节看成一个单位,按位运算还原出原始的3个字节。比如:解码前第1个字节的低6位作为解码后第1个字节的高6位,解码前第2个字节的低6位的前2位作为解码后第1个字节的低2位,这样就得到了解码后的第1个字节。后续依次按顺序推算。
还有一个问题,原始数据长度如果不是3的倍数怎么办?
那么无非是两种情况,一种是最后剩1个字节,另一种是剩两个字节:
==
=
即base64保证了编码后的字符串长度为4的倍数。
有的人会把二进制数据用base64编码后,放入url的参数中,这么做有一个问题,base64编码后可能会出现 +/= 三个字符,而这三个字符会影响到整个url串的解析。
举个例子,url串 https://pengrl.com/all?key=value ,如果将其中的value设置成 1/2= ,则url串变成 https://pengrl.com/all?key=1/2= 。其中的 / 和 = 是不是有点傻傻分不清楚呢?
那么如何解决呢?
编码后的 + 和 / 两个符号来源于上面给出的那张映射表。于是标准文档 RFC 4648 中给出另一张映射表,将其中的 + 替换成了中划线 - , / 替换成了下划线 _ 。
这里额外说一句,base64并不适合用来做文本加密,因为算法是公开的,并且它只是一种简单的查表映射,有经验的web开发者,甚至看到末尾的 = 都能猜到是base64编码。即使编码和解码都使用自定义的映射表,根据文本规律,也很容易破解出映射表。
剩下 = ,上面也说过,是由于原始数据长度不是3的倍数填充得到的,解决方法也很简单,编码时不填充,解码时剩余的不够4字节的数据按顺序解就好。
上面的两种做法,都需要保证,编码端和解码端是能对上号的。
base64主要还是对二进制做可打印编码,如果是处理url参数,最好还是使用urlencode。urlencode是啥,下回再聊。
原文链接: https://pengrl.com/p/3487/
这篇文章主要讲解通过原生js,将图片地址转换为base64格式后显示的方法,以及base64的图片数据如何转换为file文件并提交。
JavaScript对字符串/base64的编码和解码;Base64其实是一种简单的置换加密方式,但是BASE64的用处往往并不是为了防止信息泄露,而且为了方便传输,进过BASE64编码后的信息会比原始信息长,大概是4/3倍。
javascript原生的api是支持,Base64的, window.btoa方法将普通字符串转为Base64字符串,window.atob将Base64字符串转为普通字符串,它们在现代浏览器中受到广泛的支持。
在项目开发过程中,经常会有图片导出的需求,原生js实现base64图片下载实现思路:需要创建a标签,然后把base64的图片转为为blob对象,再通过URL.createObjectURL方法复制给a标签的href属性,最后添加添加事件的方法。
base64是当前网络上最为常见的传输8Bit字节代码的编码方式其中之一。base64主要不是加密,它主要的用途是把某些二进制数转成普通字符用于网络传输。由于这些二进制字符在传输协议中属于控制字符,不能直接传送,所以需要转换一下
JavaScript 原生提供两个 Base64 相关的方法:btoa():任意值转为 Base64 编码,atob():Base64 编码转为原来的值。注意:这两个方法不适合非 ASCII 码的字符,会报错。
base64是用规定的64种字符来表示任意二进制数据的一种编码格式,base64编码不提供加密,只是将一种形式的数据转化为另一种形式。Base64编码使用二进制表示,字符串的每一个字符由8个字节表示
Base64 是基于 64 个可打印字符 A-Z、a-z、0-9、+、/ 来表示二进制数据的表示方法,常用于数据在网络中的传输。本篇将分别介绍其编码、解码以及实际运用。
为什么图片转成Base64编码,就可以直接内联到HTML中显示呢?为什么Base64编码后,体积会增大1/3呢?如果你对此也有疑问的话,就往下一看究竟吧。
因为页面中插入一个图片都要写明图片的路径——相对路径或者绝对路径。而除了具体的网站图片的图片地址,如果是在自己电脑文件夹里的图片,当我们的HTML文件在别人电脑上打开的时候图片则由于地址不对或者没有将图片
内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!