我的编程空间,编程开发者的网络收藏夹
学习永远不晚

什么是Base64

短信预约 -IT技能 免费直播动态提醒
省份

北京

  • 北京
  • 上海
  • 天津
  • 重庆
  • 河北
  • 山东
  • 辽宁
  • 黑龙江
  • 吉林
  • 甘肃
  • 青海
  • 河南
  • 江苏
  • 湖北
  • 湖南
  • 江西
  • 浙江
  • 广东
  • 云南
  • 福建
  • 海南
  • 山西
  • 四川
  • 陕西
  • 贵州
  • 安徽
  • 广西
  • 内蒙
  • 西藏
  • 新疆
  • 宁夏
  • 兵团
手机号立即预约

请填写图片验证码后获取短信验证码

看不清楚,换张图片

免费获取短信验证码

什么是Base64

这篇文章主要介绍“什么是Base64”,在日常操作中,相信很多人在什么是Base64问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”什么是Base64”的疑惑有所帮助!接下来,请跟着小编一起来学习吧!

一、为什么要使用 base64

我们知道一个字节可表示的范围是 0 ~ 255(十六进制:0x00 ~ 0xFF), 其中 ASCII 值的范围为 0 ~ 127(十六进制:0x00 ~  0x7F);而超过 ASCII 范围的 128~255(十六进制:0x80 ~ 0xFF)之间的值是不可见字符。

ASCII(American Standard Code for Information  Interchange,美国信息交换标准代码)是基于拉丁字母的一套电脑编码系统。它主要用于显示现代英语,而其扩展版本延伸美国标准信息交换码则可以部分支持其他西欧语言,并等同于国际标准  ISO/IEC 646。

在 ASCII 码中 0 - 31和 127 是控制字符,共 33 个。以下是其中一部分控制字符:

什么是Base64

其余 95 个,即 32 - 126 是可打印字符,包括数字、大小写字母、常用符号等。

什么是Base64

当不可见字符在网络上传输时,比如说从 A 计算机传到 B  计算机,往往要经过多个路由设备,由于不同的设备对字符的处理方式有一些不同,这样那些不可见字符就有可能被处理错误,这是不利于传输的。

为了解决这个问题,我们可以先对数据进行编码,比如 base64 编码,变成可见字符,也就是 ASCII  码可表示的可见字符,从而确保数据可靠传输。Base64 的内容是有 0 ~ 9,a ~ z,A ~ Z,+,/ 组成,正好 64 个字符,这些字符是在  ASCII 可表示的范围内,属于 95 个可见字符的一部分。

二、什么是 base64

Base64 是一种基于 64 个可打印字符来表示二进制数据的表示方法。由于 2? = 64 ,所以每 6 个比特为一个单元,对应某个可打印字符。3  个字节有 24 个比特,对应于 4 个 base64 单元,即 3 个字节可由 4 个可打印字符来表示。相应的转换过程如下图所示:

什么是Base64

Base64 常用于在处理文本数据的场合,表示、传输、存储一些二进制数据,包括 MIME 的电子邮件及 XML 的一些复杂数据。在 MIME  格式的电子邮件中,base64 可以用来将二进制的字节序列数据编码成 ASCII 字符序列构成的文本。使用时,在传输编码方式中指定  base64。使用的字符包括大小写拉丁字母各 26 个、数字 10 个、加号 + 和斜杠 /,共 64 个字符,等号 = 用来作为后缀用途。Base64  相应的索引表如下:

什么是Base64

了解完上述的知识,我们以编码 Man 字符串为例,来直观的感受一下编码过程。Man 由 M、a 和 n 3 个字符组成,它们对应的 ASCII 码为  77、97 和 110。

什么是Base64

接着我们以每 6 个比特为一个单元,进行 base64 编码操作,具体如下图所示:

什么是Base64

由图可知,Man (3字节)编码的结果为 TWFu(4字节),很明显经过 base64 编码后体积会增加 1/3。Man 这个字符串的长度刚好是  3,我们可以用 4 个 base64 单元来表示。但如果待编码的字符串长度不是 3 的整数倍时,应该如何处理呢?

如果要编码的字节数不能被 3 整除,最后会多出 1 个或 2 个字节,那么可以使用下面的方法进行处理:先使用 0 字节值在末尾补足,使其能够被 3  整除,然后再进行 base64 的编码。

以编码字符 A 为例,其所占的字节数为 1,不能被 3 整除,需要补 2 个字节,具体如下图所示:

什么是Base64

由上图可知,字符 A 经过 base64 编码后的结果是 QQ==,该结果后面的两个 = 代表补足的字节数。而最后个 1 个 base64 字节块有 4  位是 0 值。

接着我们来看另一个示例,假设需编码的字符串为 BC,其所占字节数为 2,不能被 3 整除,需要补 1 个字节,具体如下图所示:

什么是Base64

由上图可知,字符串 BC 经过 base64 编码后的结果是 QkM=,该结果后面的 1 个 = 代表补足的字节数。而最后个 1 个 base64  字节块有 2 位是 0 值。

三、base64 编码的应用

3.1 显示 base64 编码的图片

在编写 HTML  网页时,对于一些简单图片,通常会选择将图片内容直接内嵌在网页中,从而减少不必要的网络请求,但是图片数据是二进制数据,该怎么嵌入呢?绝大多数现代浏览器都支持一种名为  Data URLs 的特性,允许使用 base64 对图片或其他文件的二进制数据进行编码,将其作为文本字符串嵌入网页中。

Data URLs 由四个部分组成:前缀(data:)、指示数据类型的 MIME 类型、如果非文本则为可选的 base64 标记、数据本身:

data:[<mediatype>][;base64],<data>

mediatype 是个 MIME 类型的字符串,例如 "image/jpeg" 表示 JPEG 图像文件。如果被省略,则默认值为  text/plain;charset=US-ASCII。如果数据是文本类型,你可以直接将文本嵌入(根据文档类型,使用合适的实体字符或转义字符)。如果是二进制数据,你可以将数据进行  base64 编码之后再进行嵌入。比如嵌入一张图片:

<img alt="logo" class="lazy" data-src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUg...">

MIME(Multipurpose Internet Mail  Extensions)多用途互联网邮件扩展类型,是设定某种扩展名的文件用一种应用程序来打开的方式类型,当该扩展名文件被访问的时候,浏览器会自动使用指定应用程序来打开。多用于指定一些客户端自定义的文件名,以及一些媒体文件打开方式。

常见的 MIME 类型有:超文本标记语言文本 .html text/html、PNG图像 .png image/png、普通文本 .txt  text/plain 等。

但需要注意的是:如果图片较大,图片的色彩层次比较丰富,则不适合使用这种方式,因为该图片经过 base64 编码后的字符串非常大,会明显增大 HTML  页面的大小,从而影响加载速度。 除此之外,利用 HTML FileReader API,我们也可以方便的实现图片本地预览功能,具体代码如下:

<input type="file" accept="image/*" onchange="loadFile(event)"> <img id="output"/> <script>   const loadFile = function(event) {     const reader = new FileReader();     reader.onload = function(){       const output = document.querySelector('#output');       output.class="lazy" data-src = reader.result;     };     reader.readAsDataURL(event.target.files[0]);   }; </script> 在完成本地图片预览之后,

在完成本地图片预览之后,可以直接把图片对应的 Data URLs 数据提交到服务器。针对这种情形,服务端需要做一些相关处理,才能正常保存上传的图片,这里以  Express 为例,具体处理代码如下:

const app = require('express')();  app.post('/upload', function(req, res){   let imgData = req.body.imgData; // 获取POST请求中的base64图片数据   let base64Data = imgData.replace(/^data:image\/\w+;base64,/, "");   let dataBuffer = Buffer.from(base64Data, 'base64');   fs.writeFile("image.png", dataBuffer, function(err) {     if(err){        res.send(err);     }else{        res.send("图片上传成功!");     }     }); });

3.2 浏览器端图片压缩

在一些场合中,我们希望在上传本地图片时,先对图片进行一定的压缩,然后再提交到服务器,从而减少传输的数据量。在前端要实现图片压缩,我们可以利用 Canvas  对象提供的 toDataURL() 方法,该方法接收 type 和 encoderOptions 两个可选参数。

其中 type 表示图片格式,默认为 image/png。而 encoderOptions 用于表示图片的质量,在指定图片格式为 image/jpeg 或  image/webp 的情况下,可以从 0 到 1 的区间内选择图片的质量。如果超出取值范围,将会使用默认值 0.92,其他参数会被忽略。

下面我们来看一下具体如何实现图片压缩:

// compress.js const MAX_WIDTH = 800; // 图片最大宽度  function compress(base64, quality, mimeType) {   let canvas = document.createElement("canvas");   let img = document.createElement("img");   img.crossOrigin = "anonymous";   return new Promise((resolve, reject) => {     img.class="lazy" data-src = base64;     img.onload = () => {       let targetWidth, targetHeight;       if (img.width > MAX_WIDTH) {         targetWidth = MAX_WIDTH;         targetHeight = (img.height * MAX_WIDTH) / img.width;       } else {         targetWidth = img.width;         targetHeight = img.height;       }       canvas.width = targetWidth;       canvas.height = targetHeight;       let ctx = canvas.getContext("2d");       ctx.clearRect(0, 0, targetWidth, targetHeight);       ctx.drawImage(img, 0, 0, canvas.width, canvas.height);       let imageData = canvas.toDataURL(mimeType, quality / 100);       resolve(imageData);     };   }); }

对于返回的 Data URL 格式的图片数据,为了进一步减少传输的数据量,我们可以把它转换为 Blob 对象:

function dataUrlToBlob(base64, mimeType) {   let bytes = window.atob(base64.split(",")[1]);   let ab = new ArrayBuffer(bytes.length);   let ia = new Uint8Array(ab);   for (let i = 0; i < bytes.length; i++) {     ia[i] = bytes.charCodeAt(i);   }   return new Blob([ab], { type: mimeType }); }

在转换完成后,我们就可以压缩后的图片对应的 Blob 对象封装在 FormData 对象中,然后再通过 AJAX 提交到服务器上:

function uploadFile(url, blob) {   let formData = new FormData();   let request = new XMLHttpRequest();   formData.append("image", blob);   request.open("POST", url, true);   request.send(formData); }

其实 Canvas 对象除了提供 toDataURL() 方法之外,它还提供了一个 toBlob() 方法,该方法的语法如下:

canvas.toBlob(callback, mimeType, qualityArgument)

和 toDataURL() 方法相比,toBlob() 方法是异步的,因此多了个 callback 参数,这个 callback  回调方法默认的第一个参数就是转换好的 blob 文件信息。

介绍完上述的内容,我们来看一下本地图片压缩完整的示例:

<!DOCTYPE html> <html>   <head>     <meta charset="UTF-8" />     <meta name="viewport" content="width=device-width, initial-scale=1.0" />     <title>本地图片压缩</title>   </head>   <body>     <input type="file" accept="image/*" onchange="loadFile(event)" />     <script class="lazy" data-src="./compress.js"></script>     <script>       const loadFile = function (event) {         const reader = new FileReader();         reader.onload = async function () {           let compressedDataURL = await compress(             reader.result,             90,             "image/jpeg"           );           let compressedImageBlob = dataUrlToBlob(compressedDataURL);           uploadFile("https://httpbin.org/post", compressedImageBlob);         };         reader.readAsDataURL(event.target.files[0]);       };     </script>   </body> </html>

四、如何进行 base64 编码和解码

4.1 使用 btoa 与 atob 函数

在 JavaScript 中,有两个函数被分别用来处理解码和编码 base64 字符串:

  • btoa():从字符串创建一个 base64 编码的 ASCII 字符串,其中字符串中的每个字符都被视为一个二进制数据字节。

  • atob():该函数能够解码通过 base64 编码的字符串数据。

btoa 使用示例

const name = 'Semlinker'; const encodedName = btoa(name); console.log(encodedName); // U2VtbGlua2Vy

atob 使用示例

const encodedName = 'U2VtbGlua2Vy'; const name = atob(encodedName); console.log(name); // Semlinker

介绍完 btoa 和 atob 这两个函数,我们再来看一下它们的兼容性:

什么是Base64

(图片来源 &mdash;&mdash; https://caniuse.com/?search=atob)

由上图可知,除了 IE6-9 和 Opera 10.1 这些版本的浏览器之外,主流的浏览器都支持 btoa 和 atob 这两个函数。

4.2 使用第三方库

对于不支持 btoa 和 atob 这两个函数的浏览器来说,我们可以使用第三方库,比如 js-base64 这个库,来实现 base64  的编码和解码。

具体的使用示例如下:

<!DOCTYPE html> <html lang="zh">   <head>     <meta charset="UTF-8" />     <meta name="viewport" content="width=device-width, initial-scale=1.0" />     <title>Base64 编码与解码示例</title>     <script class="lazy" data-src="https://cdn.jsdelivr.net/npm/js-base64@3.6.0/base64.min.js"></script>   </head>   <body>     <h4>Base64 编码与解码示例</h4>     <script>       let name = Base64.encode("阿宝哥");       console.log(name);       console.log(Base64.decode(name));     </script>   </body> </html>

在前端进行二进制处理的场景中,你可能会遇到 Data URL 转换成 Blob/File 对象的情形,接下来阿宝哥将汇总一下常用的转换函数。

五、常用转换函数

5.1 Data URL 转 Blob 对象

function dataUrlToBlob(dataurl, mimeType) {   let bytes = window.atob(dataurl.split(",")[1]);   let ab = new ArrayBuffer(bytes.length);   let ia = new Uint8Array(ab);   for (let i = 0; i < bytes.length; i++) {     ia[i] = bytes.charCodeAt(i);   }   return new Blob([ab], { type: mimeType }); }  // 使用示例 let blob = dataUrlToBlob('data:text/plain;base64,aGVsbG8gd29ybGQ=','hello.txt'); console.log(blob);

5.2 Data URL 转 File 对象

function dataUrlToFile(dataurl, filename) {   let arr = dataurl.split(","),   mime = arr[0].match(/:(.*?);/)[1],   bstr = atob(arr[1]),   n = bstr.length,   u8arr = new Uint8Array(n);   while (n--) {     u8arr[n] = bstr.charCodeAt(n);   }   return new File([u8arr], filename, { type: mime }); }  // 使用示例 let file = dataUrlToFile('data:text/plain;base64,aGVsbG8gd29ybGQ=','hello.txt'); console.log(file);

5.3 URL 转 File 对象

function urlToFile(url, filename, mimeType) {   return fetch(url).then((res) => {     return res.arrayBuffer();   }).then((buffer) =>{     return new File([buffer], filename, { type: mimeType });   }); }  // 使用示例 urlToFile('data:text/plain;base64,aGVsbG8gd29ybGQ=', 'hello.txt','text/plain')   .then(function(file){ console.log(file);});

到此,关于“什么是Base64”的学习就结束了,希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习,快去试试吧!若想继续学习更多相关知识,请继续关注编程网网站,小编会继续努力为大家带来更多实用的文章!

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

什么是Base64

下载Word文档到电脑,方便收藏和打印~

下载Word文档

猜你喜欢

2024-04-02

base64编码指的是什么

这篇文章给大家分享的是有关base64编码指的是什么的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。base64编码是网络上最常见的用于传输8Bit字节码的编码方式之一,Base64就是一种基于64个可打印字符来表
2023-06-14

python中base64指的是什么

这篇文章主要介绍python中base64指的是什么,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!python主要应用领域有哪些1、云计算,典型应用OpenStack。2、WEB前端开发,众多大型网站均为Python
2023-06-14

base64编码原理是什么

这篇文章主要介绍“base64编码原理是什么”,在日常操作中,相信很多人在base64编码原理是什么问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”base64编码原理是什么”的疑惑有所帮助!接下来,请跟着小编
2023-07-05

Base64编码的原理是什么

这篇文章主要讲解了“Base64编码的原理是什么”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“Base64编码的原理是什么”吧!Base64是一种基于64个可打印字符来表示二进制数据的表示方
2023-06-27

CSS中图片Base64编码是什么

小编给大家分享一下CSS中图片Base64编码是什么,希望大家阅读完这篇文章之后都有所收获,下面让我们一起去探讨吧!什么是 base64 编码?  我不是来讲概念的,直接切入正题,图片的 base64 编码就是可以将一副图片数据编码成一串字
2023-06-15

oracle中base64加密的方法是什么

在Oracle数据库中,可以使用UTL_ENCODE.BASE64_ENCODE函数来对字符串进行Base64加密。以下是一个简单示例:SELECT UTL_ENCODE.BASE64_ENCODE('Hello, World!
oracle中base64加密的方法是什么
2024-05-21

JavaScript中的base64编码原理是什么

今天小编给大家分享一下JavaScript中的base64编码原理是什么的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。bas
2023-07-05

JavaScript中的Base64编码字符串是什么

今天小编给大家分享一下JavaScript中的Base64编码字符串是什么的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。初步
2023-07-05

PHP中Base64 、Blob与File相互转换的方法是什么

这篇文章主要介绍“PHP中Base64 、Blob与File相互转换的方法是什么”,在日常操作中,相信很多人在PHP中Base64 、Blob与File相互转换的方法是什么问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对
2023-07-05

JAVA 中实现 Base64 编码的三种方式分别是什么?(JAVA实现Base64编码的三种方式)

在JAVA编程中,Base64编码是一种常用的数据编码方式,它将二进制数据编码为ASCII字符串,以便在网络传输或存储中使用。以下是JAVA实现Base64编码的三种方式:方式一:使用Java.util.Base64类
JAVA 中实现 Base64 编码的三种方式分别是什么?(JAVA实现Base64编码的三种方式)
Java2024-12-14

Base64编码中为什么会有等号

这篇文章主要介绍了Base64编码中为什么会有等号的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇Base64编码中为什么会有等号文章都会有所收获,下面我们一起来看看吧。Base64编码中为什么会有等号(=)如果
2023-07-05

java中Quoted-printable和Base64编码有什么区别

Quoted-printable和Base64是两种常见的编码方式,用于将二进制数据转换为可打印字符的文本格式。Quoted-printable编码:主要用于文本和邮件,将非ASCII字符(如中文、特殊字符)转换为ASCII字符。使用"=
2023-10-24

php blob 怎么转base64

php blob转base64的方法:1、打开相应的代码文件;2、修改PHP内容为“fetch("/path/to/server", {method: "POST"body: files[i]})...”即可。
2018-06-19

php image怎么转base64

php image转base64的方法:1、获取一个图片地址;2、通过“chunk_split(base64_encode($gambar));”方法将图片转换为base64字符串格式即可。
2020-08-02

java怎么实现base64编码

在Java中,可以使用java.util.Base64类来实现Base64编码。下面是一个使用Base64编码的示例代码:```javaimport java.util.Base64;public class Base64Example {
2023-08-24

Java 中如何实现 Base64 编码?(java怎么实现base64编码)

在Java编程中,Base64编码是一种常用的将二进制数据编码为ASCII字符串的方法。它通常用于在网络传输或存储中处理二进制数据,因为ASCII字符串更容易处理和传输。本文将介绍在Java中如何实现Base64编码。一、Base64编码
Java 中如何实现 Base64 编码?(java怎么实现base64编码)
Base64Java2024-12-18

编程热搜

  • Python 学习之路 - Python
    一、安装Python34Windows在Python官网(https://www.python.org/downloads/)下载安装包并安装。Python的默认安装路径是:C:\Python34配置环境变量:【右键计算机】--》【属性】-
    Python 学习之路 - Python
  • chatgpt的中文全称是什么
    chatgpt的中文全称是生成型预训练变换模型。ChatGPT是什么ChatGPT是美国人工智能研究实验室OpenAI开发的一种全新聊天机器人模型,它能够通过学习和理解人类的语言来进行对话,还能根据聊天的上下文进行互动,并协助人类完成一系列
    chatgpt的中文全称是什么
  • C/C++中extern函数使用详解
  • C/C++可变参数的使用
    可变参数的使用方法远远不止以下几种,不过在C,C++中使用可变参数时要小心,在使用printf()等函数时传入的参数个数一定不能比前面的格式化字符串中的’%’符号个数少,否则会产生访问越界,运气不好的话还会导致程序崩溃
    C/C++可变参数的使用
  • css样式文件该放在哪里
  • php中数组下标必须是连续的吗
  • Python 3 教程
    Python 3 教程 Python 的 3.0 版本,常被称为 Python 3000,或简称 Py3k。相对于 Python 的早期版本,这是一个较大的升级。为了不带入过多的累赘,Python 3.0 在设计的时候没有考虑向下兼容。 Python
    Python 3 教程
  • Python pip包管理
    一、前言    在Python中, 安装第三方模块是通过 setuptools 这个工具完成的。 Python有两个封装了 setuptools的包管理工具: easy_install  和  pip , 目前官方推荐使用 pip。    
    Python pip包管理
  • ubuntu如何重新编译内核
  • 改善Java代码之慎用java动态编译

目录