前端二进制流的关系

news2025/1/21 13:04:24

 Blob

全称：binary large object，二进制大对象，是一个js对象，可以用来存储大量二进制编码格式的数据，Blob对象是不可修改的，读取内容的唯一方法是FileReader。

创建一个Blob对象：

new Blob(array,options)

array:由ArrayBuffer，ArrayBufferView，Blob，DOMString等对象构成的，将会被放进Blob；

options：

type：默认为空""，表示将被放到blob中数组内容的MIME类型。

endings：默认为"transparent"，用于指定包含行结束符\n的字符串如何被写入，不常用。

MIME类型描述
text/plain纯文本
text/htmlHTML文档

text/javascript

Js文件
text/csscss文件
application/jsonjson文件
application/pdfpdf文件
application/xmlxml文件
image/jpegjpeg图像
image/pngpng图像
image/svg+xmlsvg图像
image/gifgif图像
audio/mpegmp3文件
video/mpegmp4文件

创建：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

</body>
<script>
    let blob = new Blob(["helloworld"],{type:"text/plain"})
    console.log(blob); //Blob {size: 10, type: 'text/plain'}
</script>

</html>

注意这里必须使用浏览器打开，node中没有blob对象，会报错。

分片

blob对象内置slice()方法，可以将blob对象分片

三个参数：

start：设置切片的起点，即切片开始的位置，默认值为0，表示从第一个字节开始。

end：设置切片的结束点，会对该位置之前的数据进行切片，默认值为blob.size.

contentType：设置新blob的MIME类型，如果省略，则默认为blob的原始值

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

</body>
<script>
    let blob = new Blob(["helloworld"],{type:"text/plain"})
    let blob2 = blob.slice(0,5,"text/plain")
    let fileReader= new FileReader()
    fileReader.readAsText(blob2)
    fileReader.onload=function(res){console.log(res.target.result);} //读取完文件触发，hello
</script>

</html>

File

File对象是特殊类型的object，在js中主要有两种方法来获取File对象：

1.input输入框选择文件后，返回的fileList对象

2.文件拖放操作生成的Datatransfer对象

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <input type="file" id="file">
</body>
<script>

    file.onchange = function (e) {
        console.log(e.target.files); //可以查到对应上传的文件，file是继承blob的对象
    }
</script>

</html>
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .dropArea{
        width: 300px;
        height: 300px;
        border:1px solid red;
    }
</style>
<body>
    <div class="dropArea" id="dropArea">

    </div>
</body>
<script>
    dropArea.ondragover=function(e){
        e.preventDefault();
    }
    dropArea.ondrop=function(e){
        e.preventDefault()
        console.log(e.dataTransfer.files); //可看到对应的文件
    }
</script>

</html>

FileReader

fileReader提供了读取blob里面内容的方法

1.readAsArrayBuffer():读取指定的Blob内容，result属性中保存的将是被读取文件的ArrayBuffer对象。

2.readAsBinaryString():读取指定的Blob内容，result属性中保存的将是被读取文件的原始二进制数据。

3.readAsDataURL():读取指定的Blob内容，result属性包含一个data:URL格式的Base64字符串。

4.readAsText():读取指定的Blob内容，result属性包含一个字符串表示所读取的文件内容。

还有一些api：

 转base64

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <input type="file" id="file">
</body>
<script>
    let fileReader = new FileReader()
    file.onchange = function (e) {
        console.log(e.target.files); //可以查到对应上传的文件，file是继承blob的对象
        fileReader.readAsDataURL(e.target.files[0])//转base64
        fileReader.onload = function (res) { console.log(res.target.result); }//显示base64的字符串
    }
</script>

</html>

转字符串且读取：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

</body>
<script>
    let blob = new Blob(["helloworld"],{type:"text/plain"})
    let fileReader= new FileReader()
    fileReader.readAsText(blob)
    fileReader.onload=function(res){console.log(res.target.result);} //读取完文件触发，hello
</script>

</html>

ArrayBuffer

我们可以理解为特殊的数组，不能直接操作所存储的数据，我们使用的还是下面TypeArray九个对象

 分为两种工具，一种是TypeArray类型的，另外一种就是DataView，前者的数组成员都是同数据类型，后者可以是不同的数据类型，类似于元组。

 TypeArray创建并操作buffer

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
<script>
    let buffer = new ArrayBuffer(32)
    console.log(buffer);
    let buffer2=new Int8Array(buffer)
    buffer2[0]=100 //可以操作数据
    console.log(buffer2);
</script>
</html>

DataView提供了以下方法来操作buffer：

读取（参数都是一个字节序号，表示开始读取的字节位置）存储（参数两个，第一个为开始写入数据的字节序号，第二个是写入的数据）
getInt8：读取1个字节，返回一个8位整数setInt8：写入1个字节的8位整数
getUint8：读取1个字节，返回一个无符号的8位整数setUint8：写入1个字节的无符号的8位整数
getInt16：读取2个字节，返回一个16位整数setInt16：写入2个字节的16位整数
getUint16：读取2个字节，返回一个无符号的16位整数setUint16：写入2个字节的无符号的16位整数
getInt32：读取4个字节，返回一个32位整数setInt32：写入4个字节的32位整数
getUint32：读取4个字节，返回一个无符号的32位整数setUint32：写入2个字节的无符号的32位整数

getFloat32：读取4个字节，返回一个32位浮点数

setFloat32：写入4个字节32位浮点数
getFloat64：读取8个字节，返回一个64位浮点数setFloat64：写入8个字节64位浮点数
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
<script>
    let buffer = new ArrayBuffer(32)
    let dataView=new DataView(buffer)
    dataView.setInt8(0,100)
    console.log(dataView.getInt8(0)); //100
</script>
</html>

Object URL

用来表示File Object 或 Blob Object的URL

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <input type="file" id="file">
</body>
<script>
    let fileReader = new FileReader()
    file.onchange = function (e) {
        console.log(e.target.files); //可以查到对应上传的文件，file是继承blob的对象
        URL.createObjectURL(e.target.files[0])//转为Object URL
        console.log(URL.createObjectURL(e.target.files[0]))
    }
</script>

</html>

Base64

在js中，有两个函数分别用来处理解码和编码base64字符串：

atob（）：解码，解码一个base64字符串，

btoa（）：编码从一个字符串或者二进制数据编码一个base64字符串

let str = atob(str1) 
let str2=btoa(str)

1.canvas画布内容转为base64的图片

2.将获取的图片文件，生成base64图片（fileReader来生成）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <canvas id="canvas" width="300" height="300"></canvas>
</body>
<script>
    let ctx=canvas.getContext("2d")
    ctx.fillRect(0,0,100,100)
    let dataUrl = canvas.toDataURL()//canvas转base64
    console.log(dataUrl);
</script>
</html>

总结：

ArrayBuffer和Blob的区别

Blob作为一个整体文件，适合用于传输，当需要对二进制数据进行操作时，使用ArrayBuffer。

通过ArrayBuffer创建Blob，然后通过FileReader读取里面的内容。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
<script>
    let buffer = new ArrayBuffer(8)
    let buffer2=new Int8Array(buffer)
    buffer2[0]=100
    console.log(buffer2[0]);
    let blob = new Blob([buffer2])
    let fileReader = new FileReader()
    fileReader.readAsArrayBuffer(blob)
    fileReader.onload=function(res){
        console.log(new Int8Array(res.target.result));
    }

</script>
</html>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/522464.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

SSM(Vue3+ElementPlus+Axios+SSM前后端分离)--后端实现

SSM(Vue3+ElementPlus+Axios+SSM前后端分离)--后端实现

目录 SSM(Vue3ElementPlusAxiosSSM前后端分离)--后端实现 技术栈 实现功能04-添加家居信息 需求分析/图解 思路分析 代码实现 创建\service\FurnService.java 和\service\FurnServiceImpl.java, 增加添加方法 修改Furn.java , 当创建Furn 对象imgPath 为null 时, imgPa…
阅读更多...
Java14-常用类：字符串，日期类，比较器

Java14-常用类：字符串，日期类，比较器

一&#xff1a;字符串&#xff1a;String 1.概述&#xff1a; String&#xff1a;字符串&#xff0c;使用一对""引起来表示。 1.String 声明 为final的&#xff0c;不可被继承 2.String 实现了Serializable接口&#xff1a;表示字符串是支持序列化的。 实现了Co…
阅读更多...
多线程相关高频面试题

多线程相关高频面试题

一、线程的基础知识 1、线程和进程的区别&#xff1f; 进程是正在运行程序的实例&#xff0c;进程中包含了线程&#xff0c;每个线程执行不同的任务。不同的进程使用不同的内存空间&#xff0c;在当前进程下的所有线程可以共享内存空间。线程更轻量&#xff0c;线程上下文切换…
阅读更多...
GPIO口输出与输入模式的理解

GPIO口输出与输入模式的理解

问题&#xff1f;看GPIO的结构图&#xff0c;发现&#xff1a; 上拉输入电流是从引脚流入外部 下来输入电流是从引脚流进芯片内部 推挽输出推模式电流是从引脚流入外部 推挽输出挽模式电流是从外部流入内部 输入输出模式都有电流流入流出&#xff0c;为什么还要分为输入输出模…
阅读更多...
K8s排错之浏览器打不开K8s Dashboard

K8s排错之浏览器打不开K8s Dashboard

一、问题 10.0.0.10 通常会使用加密技术来保护您的信息。Chrome 此次尝试连接到 10.0.0.10 时&#xff0c;该网站发回了异常的错误凭据。这可能是因为有攻击者在试图冒充 10.0.0.10&#xff0c;或者 Wi-Fi 登录屏幕中断了此次连接。请放心&#xff0c;您的信息仍然是安全的&am…
阅读更多...
【饿了么UI】elementUI密码框图标实现睁眼和闭眼效果（阿里巴巴iconfront图标库vue项目本地引用）

【饿了么UI】elementUI密码框图标实现睁眼和闭眼效果（阿里巴巴iconfront图标库vue项目本地引用）

elementUI中输入框的密码框属性&#xff0c; 默认是一个始终睁眼的图标&#xff0c;测试今天提bug要有闭眼效果&#xff08;无大语&#xff09;… 因为elementUI中的icon没有闭眼的&#xff0c;所以还要去iconfront下载引入 效果图&#xff1a; 点击后 一、下载图标 http…
阅读更多...
【LeetCode】138. 复制带随机指针的链表

【LeetCode】138. 复制带随机指针的链表

题目链接&#xff1a;https://leetcode.cn/problems/copy-list-with-random-pointer/description/ &#x1f4d5;题目要求&#xff1a; 给你一个长度为 n 的链表&#xff0c;每个节点包含一个额外增加的随机指针 random &#xff0c;该指针可以指向链表中的任何节点或空节点。…
阅读更多...
基于springboot+mybatis-puls+mysql+html实现大学生创新创业管理系统

基于springboot+mybatis-puls+mysql+html实现大学生创新创业管理系统

基于springbootmybatis-pulsmysqlhtml实现大学生创新创业管理系统 一、系统介绍1、系统主要功能&#xff1a;2.涉及技术框架&#xff1a;3.本项目所用环境&#xff1a; 二、功能展示三、其它系统四、获取源码 一、系统介绍 1、系统主要功能&#xff1a; 学生&#xff1a;申报…
阅读更多...
自更新参数web接口预热工具

自更新参数web接口预热工具

痛点 日常上线流程中经常需要对接口进行预热&#xff0c;因为服务器每次启动后都有一定次数访问失败&#xff0c;如果不处理将此请求直接抛出&#xff0c;会降低用户体验。当服务器数量较少时&#xff0c;我们可以在发布机器后&#xff0c;待机器启动使用本地hosts更改IP&…
阅读更多...
20230510MTCNN3

20230510MTCNN3

MTCNN数据制作 - 1 多任务 分类任务 回归任务 模型增加任务&#xff0c;其实就是增加输出 级联即减少了 数据量&#xff0c;又增加了 模型的精度 级联可以让网络变得越快 越好 单独来看这三个网络&#xff0c;它们的效果不会好&#xff0c;因为网络太浅了 但&#xff0c;当…
阅读更多...
【嵌入式烧录刷写文件】-1.3-删除/修改Motorola S-record(S19/SREC/mot/SX)文件中指定地址范围内的数据

【嵌入式烧录刷写文件】-1.3-删除/修改Motorola S-record(S19/SREC/mot/SX)文件中指定地址范围内的数据

案例背景&#xff08;共6页精讲&#xff09;&#xff1a; 有如下一段S19文件&#xff0c;如何“自动”地完成地址范围0x9110-0x9113数据的删除或修改。 S0110000486578766965772056312E30352EA6 S123910058595A5B5C5D5E5F606162636465666768696A6B6C6D6E6F70717273747576775B…
阅读更多...
t检验前世今生

t检验前世今生

1、背景 t检验是科研中非常常用的一种方法和手段&#xff0c;但是理解到位的人并不多&#xff0c;虽然这也不影响其使用。本文主要目的在于将与t检验有关的前前后后都讲明白。 2、补充知识 理解t检验&#xff0c;我们需要补充一些统计学有关的先验知识。 2.1 正态分布 概率…
阅读更多...
【文本三剑客】SED

【文本三剑客】SED

SED 一、sed编辑器1.2sed简介1.3sed工作流程1.4sed命令格式1.5常用选项1.6常用操作 二、sed实验2.1打印内容2.2删除行2.3替换2.4插入 一、sed编辑器 1.2sed简介 sed是一种流编辑器&#xff0c;流编辑器会在编辑器处理数据之前基于预先提供的一组规则来编辑数据流。sed编辑器可…
阅读更多...
链表详解 - C语言描述

链表详解 - C语言描述

目录 认识链表 链表的分类 链表的实现 单链表的增删查改 增操作 删操作 查操作 改操作 带头双向循环链表 认识链表 链表是一种物理存储上非连续&#xff0c;数据元素的逻辑顺序通过链表中的指针链接次序&#xff0c;实现的一种线性存储结构。链表由一系列节点(结点)组…
阅读更多...
最火爆ChatGPT知识星球分享，开启与GPT的神奇之旅

最火爆ChatGPT知识星球分享，开启与GPT的神奇之旅

今天给大家介绍的是一个讲解ChatGPt的知识星球&#xff0c;这个星球是专门为ChatGPT爱好者和AI绘画感兴趣的朋友们打造的。这个知识星球主题是关于ChatGPT的&#xff0c;旨在提供一个交流、学习和探索GPT的平台。 这里有一个强大的阵容&#xff0c;汇集了许多对人工智能和自然…
阅读更多...
.Net平台下OpenGL绘制图形（2）(VS2019,Winform,C#)

.Net平台下OpenGL绘制图形（2）(VS2019,Winform,C#)

本节主要讲诉图形绘制的原理&#xff0c;使用介绍和代码演示。 原理介绍 我们先来讲讲OpenGL的图形绘制。其实&#xff0c;所有的图形都是由许多个小图形连接而成的。你可以理解为是图片的像素&#xff0c;一张彩图是由很多个色彩不一的像素点组合而成。要实现色彩绚丽的图形设…
阅读更多...
安装旧版本chrome 浏览器方法

安装旧版本chrome 浏览器方法

1、下载 国内推荐下载网址&#xff1a;https://www.slimjet.com/chrome/google-chrome-old-version.php 我自己目前再用的103.0.5060.53版本&#xff0c;也可以到我网盘下载[若失效可联系我更新]。 2、安装之前&#xff0c;请先卸载干净当前版本 打开控制面板&#xff0c;找打…
阅读更多...
挣值管理专题

挣值管理专题

挣值管理 基本思路 该方法的基本思想是应用统计学的原理&#xff0c;通过引进一个中间变量即“挣值”来帮助项目管理者分析项目成本的变动情况&#xff0c;并给出项目成本与工期相关变化的信息及对项目成本发展趋势作出预测与决策。 挣值的定义 挣值是一个表示项目“已完成作业…
阅读更多...
Linux多路复用机制原理分析--select/poll

Linux多路复用机制原理分析--select/poll

前言 Linux访问设备的IO模型主要有五种&#xff0c;分别是非阻塞IO模型、阻塞IO模型、IO多路复用模型、信号驱动模型以及异步IO模型。本文主要分析IO多路复用模型&#xff0c;Linux下的IO多路复用模型主要有select/poll/epoll等机制实现。 IO多路复用模型可以实现以非阻塞的方…
阅读更多...
Dijkstra算法图解，C++实现Dijkstra算法

Dijkstra算法图解，C++实现Dijkstra算法

目录 Dijkstra算法简介数据结构抽象初始化开始计算第一轮计算第二轮计算第三轮计算第四轮计算算法总结 C实现Dijkstra算法 Dijkstra算法简介 Dijkstra算法计算是从一个顶点到其余各顶点的最短路径算法&#xff0c;解决的是有权图中最短路径问题。迪杰斯特拉算法主要特点是从起…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023