深入浅出JavaScript中base64编码原理

深入浅出JavaScript中base64编码原理

什么是base64编码

Base64是一种用于将二进制数据转换成ASCII字符的编码方式。它使用64个字符表示64个不同的二进制数字,每个字符表示6个二进制位,因此每3个字节需要进行编码,得到4个字符。这种编码方式常用于电子邮件和HTTP协议传输数据,因为它可以处理非文本数据。

base64编码原理

在JavaScript中,将字符串转换为base64编码有两个核心方法:btoa()atob()btoa()方法用于将二进制数据编码为ASCII字符串,atob()方法用于将ASCII字符串解码为二进制数据。

btoa()方法

该方法接受一个字符串作为参数,返回一个base64编码的字符串。下面是一个简单的示例:

const originStr = "Hello, World!"; // 原始字符串

const base64Str = btoa(originStr); // 编码后的base64字符串

console.log(base64Str); // 输出:SGVsbG8sIFdvcmxkIQ==

在上面的示例中,我们将原始字符串“Hello, World!”通过btoa()方法进行编码,得到了编码后的字符串“SGVsbG8sIFdvcmxkIQ==”。

atob()方法

该方法接受一个base64编码的字符串作为参数,返回一个解码后的二进制数据。下面是一个简单的示例:

const base64Str = "SGVsbG8sIFdvcmxkIQ=="; // base64字符串

const originStr = atob(base64Str); // 解码后的原始字符串

console.log(originStr); // 输出:Hello, World!

在上面的示例中,我们将编码后的字符串“SGVsbG8sIFdvcmxkIQ==”通过atob()方法进行解码,得到了原始字符串“Hello, World!”。

使用案例

案例一:将图片转换为base64编码

将图片转换为base64编码可以在网页上直接显示图片,而不需要额外的请求。下面是一个示例:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>将图片转换为base64编码</title>
  </head>
  <body>
    <img
      src="https://picsum.photos/id/100/500/300"
      alt="一张图片"
      id="img1"
    />

    <script>
      const imgElem = document.getElementById("img1"); // 获取img元素

      const imgSrc = imgElem.src; // 获取图片路径

      const imgBase64 = await getImageBase64(imgSrc); // 获取图片的base64编码

      console.log(imgBase64); // 输出图片的base64编码

      // 获取图片的base64编码
      function getImageBase64(imgSrc) {
        return new Promise((resolve, reject) => {
          const img = new Image();

          img.setAttribute("crossOrigin", "Anonymous"); // 设置图片跨域

          img.onload = function() {
            const canvas = document.createElement("canvas");

            canvas.width = img.width;
            canvas.height = img.height;

            const ctx = canvas.getContext("2d");

            ctx.drawImage(img, 0, 0, img.width, img.height);

            const dataURL = canvas.toDataURL("image/png");

            resolve(dataURL);

            canvas = null;
          };

          img.src = imgSrc;
        });
      }
    </script>
  </body>
</html>

在上面的示例中,我们使用getImageBase64()函数获取图片的base64编码,并将其输出到控制台中。

案例二:使用base64编码传输二进制数据

在客户端和服务器之间传输二进制数据时,可以将二进制数据进行base64编码,然后通过HTTP协议传输,这样可以避免二进制数据被破坏。

以下是一个简单的示例:

// 客户端发送数据
const data = new Uint8Array([1, 2, 3, 4, 5]); // Uint8Array类型的二进制数据

const base64Data = btoa(String.fromCharCode(...data)); // 将二进制数据转换为base64编码

fetch('/upload', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({
    data: base64Data
  })
});

// 服务器接收数据
router.post('/upload', async (ctx) => {
  const { data } = JSON.parse(ctx.request.body);

  const binaryData = atob(data).split('').map((char) => char.charCodeAt(0)); // 将base64编码的字符串解码为二进制数据

  const arrayBuffer = new Uint8Array(binaryData).buffer; // ArrayBuffer类型的二进制数据

  // 处理二进制数据

  ctx.body = 'success';
});

在上面的示例中,我们将客户端发送的二进制数据通过base64编码方式进行传输,并在服务器端解码,得到原始的二进制数据。

本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:深入浅出JavaScript中base64编码原理 - Python技术站

(0)
上一篇 2023年5月20日
下一篇 2023年5月20日

相关文章

  • javascript数据类型验证方法

    下面是 JavaScript 数据类型验证方法的完整攻略: 一、JavaScript 常见数据类型 在进行数据类型验证之前,我们先介绍一下 JavaScript 中常见的数据类型: 基本数据类型 undefined:未定义的值 null:空值 boolean:布尔值 number:数字 string:字符串 symbol:ES6 引入的符号类型 引用数据类型…

    JavaScript 2023年6月10日
    00
  • JavaScript判断是否为数组的各种方法汇总

    下面我详细来讲解“JavaScript判断是否为数组的各种方法汇总”的完整攻略。 1. 使用Array.isArray()判断 首先,使用Array.isArray()方法是最简单、最有效的判断是否为数组的方法。这个方法返回布尔值,如果是数组则返回true,否则返回false。 示例代码如下: let arr = [1,2,3]; let isArr = A…

    JavaScript 2023年5月27日
    00
  • vue 微信分享回调iOS和安卓回调出现错误的解决

    关于“vue 微信分享回调iOS和安卓回调出现错误的解决”的完整攻略,可以分为以下步骤来讲解: 问题描述 在使用Vue进行微信分享的过程中,有时候会遇到iOS和安卓回调出现错误的问题,即分享到朋友圈或好友之后,无法回调到指定的页面。 原因分析 造成这个问题的原因是因为iOS和安卓的微信分享机制不同。在iOS中,分享过程会在微信外部浏览器或内置浏览器中进行,分…

    JavaScript 2023年6月11日
    00
  • js parentElement和offsetParent之间的区别

    js parentElement和offsetParent之间的区别 在使用 JavaScript 操作 DOM(文档对象模型)时,我们经常会遇到 parentElement 和 offsetParent 这两个属性,这两个属性都可以用来访问一个元素的父级元素。虽然它们看起来很相似,但它们有着不同的工作方式和用途。 parentElement parentE…

    JavaScript 2023年6月10日
    00
  • 使用JSLint提高JS代码质量方法分享

    下面我将为你讲解如何使用JSLint来提高JS代码质量的完整攻略。 什么是 JSLint? JSLint 是一个自动检测 JavaScript 代码风格和错误的工具,它可以帮助您编写更加规范和健壮的 JavaScript 代码。 如何使用 JSLint 检测 JavaScript 代码? 你可以使用以下两种方法使用 JSLint 检测 JavaScript …

    JavaScript 2023年5月19日
    00
  • 解决JS浮点数运算出现Bug的方法

    下面是针对解决JS浮点数运算出现Bug的方法的完整攻略: 解决JS浮点数运算出现Bug的方法 问题描述 在JavaScript中,进行浮点数运算时,会出现精度问题,例如: 0.1 + 0.2 // 0.30000000000000004 这是因为JavaScript采用的是IEEE 754标准定义的64位双精度浮点数,无法精确表示某些小数。这种问题会影响到一…

    JavaScript 2023年6月11日
    00
  • JS中new Date().Format(“yyyy-MM-dd”) 报错的解决

    JS中使用new Date().Format(“yyyy-MM-dd”)进行日期格式化时,会出现报错的问题。这是因为JS本身不支持Date对象的Format方法。要正确地格式化日期,需要使用JS的日期对象的原型扩展prototype方法。 具体的解决方法是:通过扩展JS中日期对象的原型,自定义一个Format方法,将日期格式化成所需要的字符串形式。以下是代码…

    JavaScript 2023年5月18日
    00
  • jsonp实现百度下拉框功能的方法分析

    下面是“jsonp实现百度下拉框功能的方法分析”的完整攻略,包含两条示例说明。 1. 什么是jsonp jsonp是JSON with Padding的缩写,是一种跨域数据访问的方法。通常情况下,由于浏览器同源策略的限制,我们无法通过ajax请求跨域的数据。但是可以通过动态添加<script>标签,来跨域获取数据。这就是jsonp的实现原理。 2…

    JavaScript 2023年5月27日
    00
合作推广
合作推广
分享本页
返回顶部