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

这篇具有很好参考价值的文章主要介绍了JS中的常见二进制数据格式。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

格式 描述 用途 示例
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);

部分使用示例:
 文章来源地址https://www.toymoban.com/news/detail-847603.html

<!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>

到了这里,关于JS中的常见二进制数据格式的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • java数据结构与算法刷题-----LeetCode1091. 二进制矩阵中的最短路径

    java数据结构与算法刷题目录(剑指Offer、LeetCode、ACM)-----主目录-----持续更新(进不去说明我没写完): https://blog.csdn.net/grd_java/article/details/123063846 双分裂蛇:是求二维表中从起点到终点的经典思路(也是求无权图的最短路径问题的经典解法)。创建两条分裂蛇,分别从起点和

    2024年04月26日
    浏览(52)
  • SQL server中:常见问题汇总(如:修改表时不允许修改表结构、将截断字符串或二进制数据等)

    步骤 选择菜单栏中的“工具”-“选项”,在选项对话框左栏中找到“设计器”,在设计器右边取消勾选“阻止保存要求重新创建表的更改”即可。 图例 注意 设计表时,尽量一次性设计成功,避免使用alter修改表,修改起来有各种约束,不容易修改。 解决: 你设置的数据类型

    2024年02月03日
    浏览(42)
  • 【渗透测试之二进制安全系列】格式化漏洞揭秘(一)

    相信学习过C语言的童鞋儿们,都有接触过比较基础的输入输出函数(例如,scanf和printf等),那么对于%s、%d、%f、%c、%x等 格式化符号 应该并不会感到陌生。学习过汇编语言,并且有逆向工程基础的童鞋儿们,应该都对C语言翻译成汇编语言代码的大概格式会有所了解! 我们

    2024年02月04日
    浏览(46)
  • SSM 前端使用AJAX方式,fromdata文件格式上传二进制流文件

    今天在上课的时候,遇到了一个比较坑的问题,有个学生拿来了她的代码,让我给她看看为什么传值传不过来。 首先,前端是这样的: 后端是这样的: 然后上传文件的配置器是这样的: 她遇到的第一个问题是,后端这里接受值的时候,接受到的id和文件都是null,然后再后续

    2024年02月10日
    浏览(77)
  • 【嵌入式烧录/刷写文件】-3.1-详解二进制Bin格式文件

    目录 1 什么是bin 2 bin文件的结构 3 如何打开bin文件 3.1 使用Vector HexView工具打开 3.2 使用Notepad++工具打开 3.3 使用Binary Viewer工具打开 结尾 优质博文推荐阅读(单击下方链接,即可跳转): 点击返回「《Autosar从入门到精通-实战篇》总目录」 点击返回「《Autosar_BSW高阶配置》总

    2024年02月08日
    浏览(57)
  • 关于二进制的原码、补码和反码,以及表示范围、常见位运算符和进制转换的理解与简述

    【版权声明】未经博主同意,谢绝转载!(请尊重原创,博主保留追究权) https://www.cnblogs.com/cnb-yuchen/p/17963363 出自【进步*于辰的博客】 参考笔记一,P3.13、P5.1;笔记三,P43.1/3、P44.1。 注:我暂且没有整理关于二进制、原码、补码和反码等概念的理论,本文中的阐述都基于

    2024年02月02日
    浏览(46)
  • Qt中的 tableView 设置 二进制 十六进制 序号表头

    因为QTableView的垂直表头并不支持使用委托来自定义。 相反,可以通过将自定义的QWidget作为QHeaderView的标签来实现这一目标。 代码: 在这个示例中,自定义了BinaryHeaderView类,继承自QHeaderView, 重写了paintSection方法来绘制二进制序列。然后,将这个自定义的垂直表头应用到了

    2024年04月27日
    浏览(44)
  • js使用xlsx生成二进制文件用于上传(不下载)

    业务中经常会处理各种数据,本文介绍了前端通过 xlsx 库将数据转换为 excel 文件用于上传的实现。

    2024年02月13日
    浏览(61)
  • Windows环境下Node.js二进制版安装教程

    新版的 Node.js 已自带 npm ,就在 Node.js 下载完成解压后的文件内,的 node_modules 包中。 npm 的作用:是对 Node.js 依赖的包进行管理,类似 maven 。 下载地址 https://nodejs.org/en 下载binary包 解压后 NODE_PATH , node.exe 所在路径。 添加 PATH CMD 命令行中用 npm -v 和 node -v 测试一下是否按照成

    2024年02月14日
    浏览(44)
  • 前端:JS:将图片转为二进制与其他文本传入后端

    在前端,可以将图片转换为二进制数据,并将其与其他文本字符串一起发送到后端。一种常见的方法是将所有数据组合为一个 FormData 对象,然后通过 AJAX 或 Fetch API 将其发送给后端。以下是一个示例: 解释 : 当文件输入框内容发生变化时,会触发 change 事件。然后,它会读

    2024年04月26日
    浏览(41)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包