资讯专栏INFORMATION COLUMN

Base64基本原理及简单应用

zzir / 2676人阅读

摘要:编码原理编码之所以称为,是因为其使用个字符来对任意数据进行编码,同理有编码。本文学习网上资料整理而来,仅供个人学习使用,部分内容仅代表个人理解及思考。

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标签嵌入图片:

下面说下具体使用方法(以icon图标为例):

下载或制作所需图标;

使用base64在线编码工具,将图标编码成字符串;

将得到的字符串复制到你的前端代码中使用(例如background:url(字符串))

4.适用场景

一般适用于比较小、色彩层次单一的图片(如icon图标),不要试图用于色彩丰富的较大图片,尽管能够实现展现,但由于编码后的字符串非常大,会明显增大HTML/CSS文件的大小,影响加载速度。

本文学习网上资料整理而来,仅供个人学习使用,部分内容仅代表个人理解及思考。
主要参考
http://blog.xiayf.cn/2016/01/...
http://blog.csdn.net/zdy0_200...

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/112951.html

相关文章

  • 理解JWT(JSON Web Token)认证python实践

    摘要:认证服务器,即服务提供商专门用来处理认证的服务器。它与认证服务器,可以是同一台服务器,也可以是不同的服务器。客户端使用上一步获得的授权,向认证服务器申请令牌。认证服务器对客户端进行认证以后,确认无误,同意发放令牌。 最近想做个小程序,需要用到授权认证流程。以前项目都是用的 OAuth2 认证,但是Sanic 使用OAuth2 不太方便,就想试一下 JWT 的认证方式。这一篇主要内容是 ...

    BigTomato 评论0 收藏0
  • 5分钟即可掌握的前端高效利器:JavaScript 策略模式

    摘要:策略模式由两部分构成一部分是封装不同策略的策略组,另一部分是。策略模式的典型应用场景是表单校验中,对于校验规则的封装。然而图像的压缩及上传错误处理等部分是公用的。遂考虑使用策略模式封装。 浅谈 JavaScript 中策略模式的使用: 什么是设计模式 什么是策略模式 策略模式在 JavaScript 中的应用(使用策略模式封装百度AI识别调用) 策略模式在 Vue 组件封装中的应用(...

    BlackFlagBin 评论0 收藏0
  • 谈谈Web应用中的图片优化技巧反思

    摘要:要注意老旧的浏览器不支持的特性,它会继续正常加载属性引用的图像。五安全地使用图片的优势这里不再赘述,简单来说 这篇文章,我们将一起探讨,web应用中能对图片进行什么样的优化,以及反思一些负优化手段 一、为什么要对图片进行优化 对于大多数前端工程师来说,图片就是UI设计师(或者自己)切好的图,你要做的只是把图片丢进项目中,然后用以链接的方式呈现在页面上,而且我们也经常把精力放在项目的打包...

    zone 评论0 收藏0
  • Docker 深入篇之 Build 原理

    摘要:先简单介绍下,通常情况下我们将其称之为镜像,镜像是由多个层组成的文件,这些层用于在容器内执行代码命令等。而的时候则会将此信息再次进行编码。 使用 Docker 时,最常用的命令无非是 docker container 和 docker image 相关的子命令,当然最初没有管理类命令(或者说分组)的时候,最常使用的命令也无非是 docker run docker commit dock...

    BearyChat 评论0 收藏0
  • Docker 深入篇之 Build 原理

    摘要:先简单介绍下,通常情况下我们将其称之为镜像,镜像是由多个层组成的文件,这些层用于在容器内执行代码命令等。而的时候则会将此信息再次进行编码。 使用 Docker 时,最常用的命令无非是 docker container 和 docker image 相关的子命令,当然最初没有管理类命令(或者说分组)的时候,最常使用的命令也无非是 docker run docker commit dock...

    scq000 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<