JS中的常见二进制数据格式

一天只码五十行

已于 2024-06-24 22:48:28 修改

阅读量280

点赞数 3

文章标签： javascript 开发语言 ecmascript

于 2024-04-10 23:51:11 首次发布

本文链接：https://blog.csdn.net/qq_45820271/article/details/137616270

版权

格式	描述	用途	示例
ArrayBuffer	固定长度的二进制数据缓冲区，不直接操作具体的数据，而是通过类型数组或DataView对象来读写	用于存储和处理大量的二进制数据，如文件、图像等	`let buffer = new ArrayBuffer(16);`
TypedArray	基于ArrayBuffer对象的视图，提供特定格式的读写接口	用于操作具有特定数据类型的二进制数据	`let int32View = new Int32Array(buffer);`
DataView	提供对ArrayBuffer的复杂和灵活读写操作，可以读写任意位置的任意类型的数据	当需要精确控制二进制数据的读写位置和格式时使用	`let dataView = new DataView(buffer);`
Blob	表示不可变的原始数据，通常是二进制数据或文本数据	用于处理文件、图片等二进制数据，可以通过URL.createObjectURL()创建对象URL	`let blob = new Blob([arrayBuffer], {type: 'image/jpeg'});`
File	继承自Blob，表示用户系统上的具体文件	用于处理用户上传的文件，可以获取文件名、大小等信息	`let file = new File([blob], 'filename.jpg', {type: 'image/jpeg'});`
Uint8Array	8位无符号整数类型数组，用于存储0到255之间的整数	用于处理8位图像数据、字节流等	`let uint8Array = new Uint8Array(buffer);`
Uint16Array	16位无符号整数类型数组，用于存储0到65535之间的整数	用于处理音频数据、图像数据等	`let uint16Array = new Uint16Array(buffer);`
Float32Array	32位浮点数类型数组，用于存储浮点数	用于处理浮点数的二进制数据，如科学计算、物理模拟等	`let float32Array = new Float32Array(buffer);`

部分使用示例：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>二进制格式转换示例</title>
  </head>
  <body>
    <input type="file" id="fileInput" accept="*" />
    <button onclick="convertFileToBinaryFormats()">转换文件为二进制格式</button>
    <pre id="output"></pre>

    <script>
      function convertFileToBinaryFormats() {
        const fileInput = document.getElementById("fileInput");
        const file = fileInput.files[0];

        if (!file) {
          alert("未选择文件");
          return;
        }

        let reader = new FileReader(); // 使用let而不是const

        reader.onload = function (event) {
          const arrayBuffer = event.target.result;

          // ArrayBuffer
          console.log("ArrayBuffer:", arrayBuffer);

          // TypedArray (例如 Uint8Array)
          const uint8Array = new Uint8Array(arrayBuffer);
          console.log("Uint8Array:", uint8Array);

          // DataView
          const dataView = new DataView(arrayBuffer);
          console.log("DataView:", dataView);

          // Blob
          const blob = new Blob([arrayBuffer], { type: file.type });
          console.log("Blob:", blob);

          // 显示部分Uint8Array内容作为示例
          const output = `文件类型: ${file.type}<br>`;
          output += `ArrayBuffer长度: ${arrayBuffer.byteLength} 字节<br>`;
          output += `Uint8Array前10个字节: ${Array.from(uint8Array.slice(0, 10))
            .map((b) => b.toString(16).padStart(2, "0"))
            .join(" ")}<br>`;

          document.getElementById("output").textContent = output;
        };

        reader.readAsArrayBuffer(file);
      }
    </script>
  </body>
</html>