JavaScript中关于base64的一些事

什么是Base64

Base64是一种将二进制数据编码成可打印ASCII字符的方式。它可以将常见的图片、音频、视频等二进制文件以文本方式存储，方便数据传输和存储。

Base64编码与解码

Base64编码

在JavaScript中，可以使用btoa()函数将文本或二进制数据转换为Base64编码。

const text = "Hello, world!";
const base64EncodedText = btoa(text);
console.log(base64EncodedText); // "SGVsbG8sIHdvcmxkIQ=="

更复杂一些的情况下，可以使用TextEncoder API将文本编码成Uint8Array数组，再将数组传递给btoa()函数进行编码。

const text = "Hello, 世界!";
const encoder = new TextEncoder();
const utf8Array = encoder.encode(text);
const base64EncodedText = btoa(String.fromCharCode.apply(null, utf8Array));
console.log(base64EncodedText); // "SGVsbG8sIOeahOW-pee8lA=="

Base64解码

同样，也可以使用JavaScript中的atob()函数将Base64编码的数据解码为文本或二进制数据。

const base64EncodedText = "SGVsbG8sIHdvcmxkIQ==";
const text = atob(base64EncodedText);
console.log(text); // "Hello, world!"

需要注意的是，使用atob()函数解码Base64编码的数据，如果数据包含了非法字符，会抛出一个异常。

const base64EncodedText = "SGVsbG8sIHdvcmxkIQ&="; // 非法字符"&"
try {
  const text = atob(base64EncodedText);
  console.log(text);
} catch (e) {
  console.error(e.message); // "Invalid character: The string to be decoded is not correctly encoded."
}

Base64的应用

图片的Base64编码

对于一张图片，可以使用XMLHttpRequest对象的responseType属性设置为"blob"，然后通过FileReader对象读取图片数据，最后使用btoa()函数将二进制数据编码为Base64字符串。

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>Image to Base64</title>
</head>

<body>
  <input type="file" id="imageInput" accept="image/*">
  <button onclick="convertImage()">Convert to Base64</button>
  <div id="imagePreview"></div>

  <script>
    function convertImage() {
      const imageInput = document.getElementById("imageInput");
      const imagePreview = document.getElementById("imagePreview");

      if (imageInput.files && imageInput.files[0]) {
        const fileReader = new FileReader();
        fileReader.onload = function() {
          const image = new Image();
          image.src = this.result;
          image.onload = function() {
            const canvas = document.createElement("canvas");
            canvas.width = image.width;
            canvas.height = image.height;

            const context = canvas.getContext("2d");
            context.drawImage(image, 0, 0);

            const base64String = canvas.toDataURL();
            imagePreview.innerHTML = `<img src="${base64String}">`;
          };
        };
        fileReader.readAsDataURL(imageInput.files[0]);
      }
    }
  </script>
</body>

</html>

文件的Base64编码

对于一个二进制文件，可以使用XMLHttpRequest对象的responseType属性设置为"arraybuffer"，然后将获取到的文件数据传递给btoa()函数进行Base64编码。

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>File to Base64</title>
</head>

<body>
  <input type="file" id="fileInput">
  <button onclick="convertFile()">Convert to Base64</button>
  <div id="filePreview"></div>

  <script>
    function convertFile() {
      const fileInput = document.getElementById("fileInput");
      const filePreview = document.getElementById("filePreview");

      if (fileInput.files && fileInput.files[0]) {
        const fileReader = new FileReader();
        fileReader.onload = function() {
          const base64String = btoa(String.fromCharCode.apply(null, new Uint8Array(this.result)));
          filePreview.innerHTML = `Base64: ${base64String}`;
        };
        fileReader.readAsArrayBuffer(fileInput.files[0]);
      }
    }
  </script>
</body>

</html>

以上就是使用JavaScript进行Base64编解码的一些事情。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：JavaScript中关于base64的一些事 - Python技术站