FED实验室 - 专注WEB端开发和用户体验

聊聊Base64

CSS(3) JAVASCRIPT 煦涵 2118℃ 0评论

做为一名FE,你肯定用到过base64,谈到base64,你可能会想到以下几点,base64是什么,浏览器如何解析,现有技术如何把图片转换为base64,base64应用场景有哪些,base64如何解码等等,下面就这些问题一一讲述.

base64是什么

Base64是网络上最常见的用于传输8Bit字节代码的编码方式之一,大家可以查看RFC2045~RFC2049,上面有MIME的详细规范。Base64编码可用于在HTTP环境下传递较长的标识信息。例如,在Java Persistence系统Hibernate中,就采用了Base64来将一个较长的唯一标识符(一般为128-bit的UUID)编码为一个字符串,用作HTTP表单和HTTP GET URL中的参数。在其他应用程序中,也常常需要把二进制数据编码为适合放在URL(包括隐藏表单域)中的形式。此时,采用Base64编码具有不可读性,即所编码的数据不会被人用肉眼所直接看到。

base64,也就是说选出64个字符----小写字母a-z、大写字母A-Z、数字0-9、符号"+"、"/"(再加上作为垫字的"=",实际上是65个字符)----作为一个基本字符集。然后,其他所有符号都转换成这个字符集中的字符。

参考MIME笔记

Base64的编码原理

第一步,将每三个字节作为一组,一共是24个二进制位。
第二步,将这24个二进制位分为四组,每个组有6个二进制位。
第三步,在每组前面加两个00,扩展成32个二进制位,即四个字节。
第四步,根据下表,得到扩展后的每个字节的对应符号,这就是Base64的编码值。

0   A   17 R   	34 i   	51 z
1   B   	 18 S   	35 j   	52 0
2   C    	19 T   	36 k   	53 1
3   D   	 20 U  	37 l   	54 2
4   E    	 21 V  	38 m 	        55 3
5   F    	 22 W 	39 n  	56 4
6   G   	 23 X   	40 o  	57 5
7   H   	 24 Y   	41 p  	58 6
8   I     	25 Z   	42 q   	59 7
9   J     	26 a   	43 r    	60 8
10 K    	27 b	44 s	        61 9
11 L    	28 c	45 t    	62 +
12 M   	29 d	46 u   	63 /
13 N   	30 e	47 v
14 O   	31 f	48 w   
15 P    	32 g	49 x
16 Q   	33 h	50 y

 

Base64编码会把3字节的二进制数据编码为4字节的文本数据,长度增加33%,但好处是编码后的文本数据可以在邮件正文、网页等直接显示。
如果要编码的二进制数据不是3的倍数,最后会剩下1个或2个字节怎么办?Base64用\x00字节在末尾补足后,再在编码的末尾加上1个或2个=号,表示补了多少字节,解码的时候,会自动去掉。参考Base64笔记里面有个例子浅显易懂.

如何用Javascript语言进行Base64编码。
首先,假定网页的编码是utf-8,我们希望对于同样的字符串,用PHP和Javascript可以得到同样的Base64编码。
这里就会产生一个问题。因为Javascript内部的字符串,都以utf-16的形式进行保存,因此编码的时候,我们首先必须将utf-8的值转成utf-16再编码,解码的时候,则是解码后还需要将utf-16的值转回成utf-8。

如何把图片转换为base64

我们指导Canvas 元素提供了一个接口可以把图片转换为base64,canvas.toDataURL(type, encoderOptions):

type Optional
A DOMString indicating the image format. The default type is image/png.
encoderOptions Optional
A Number between 0 and 1 indicating image quality if the requested type is image/jpeg or image/webp.
If this argument is anything else, the default value for image quality is used. Other arguments are ignored.
Return value
A DOMString containing the requested data URI.

参考地址:toDataURL
Canvas元素是HTML5新增的API,我们来看看官方文档的API:

The toDataURL() method must run the following steps:
If the canvas element's bitmap's origin-clean flag is set to false, throw a SecurityError exception and abort these steps.
If the canvas element's bitmap has no pixels (i.e. either its horizontal dimension or its vertical dimension is zero) then return the string "data:," and abort these steps. (This is the shortest data: URL; it represents the empty string in a text/plain resource.)
Let file be a serialization of the canvas element's bitmap as a file, using the method's arguments (if any) as the arguments.
Return a data: URL representing file. [RFC2397]

参考: CANVAS ELEMENT

前端开发中何时使用base64

在前端开发中使用base64应该保持理性的心态,不可盲目使用,一般在几kb的图片时可以使用base64,最常用的场景就是一些icon的使用,但是建议转换base64之前先进行图片的压缩,因为我切出来的图通常还是有压缩空间的,这里推荐一款腾讯的开源压缩工具智图,压缩质量还是比较高.

在前端其实是用到Data Urls技术来实现,因为CSS/JS文件可以通过浏览器来缓存,从而达到减少HTTP请求的目的.data URIs, defined by RFC 2397, allow content creators to embed small files inline in documents.,
参考: data urls

下面是「FED实验室」的微信公众号二维码,欢迎扫描关注:

FED实验室

行文不易,如有帮助,欢迎打赏!

赞赏支持 喜欢 (1)
捐赠共勉
发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址