用AI理解前端文件类型

开始讲解 第一步:数据获取

vbnet 复制代码
By fetch/xhr
By FileReader/Response
  • fetch/xhr : 使用 fetchXMLHttpRequest (XHR) 从网络获取数据。这些方法可以用来请求服务器上的资源,返回的数据可以是各种格式,包括 ArrayBuffer
  • FileReader/Response : 使用 FileReader 对象读取本地文件,或者处理 Response 对象中的数据。FileReader 可以将文件内容读取为 ArrayBuffer图表模拟:
sql 复制代码
+----------------+       +------------------+
|  Network Data  |------>|  fetch/xhr       |
+----------------+       +------------------+
                            |
                            |
                            v
+----------------+       +------------------+
|  Local File    |------>|  FileReader      |
+----------------+       +------------------+

第二步:数据处理

arduino 复制代码
typedArray.buffer
new TypedArray(buffer)
ArrayBuffer
  • typedArray.buffer : TypedArray 对象有一个 buffer 属性,指向其底层的 ArrayBuffer
  • new TypedArray(buffer) : 可以通过 ArrayBuffer 创建新的 TypedArray 对象,例如 new Uint8Array(buffer)
  • ArrayBuffer : 这是一个用于表示通用的、固定长度的二进制数据缓冲区的对象。 图表模拟:
lua 复制代码
+------------------+       +------------------+
|  ArrayBuffer    |<------>|  TypedArray      |
+------------------+       +------------------+
                            |
                            |
                            v
+------------------+       +------------------+
|  Buffer Data     |<------>|  typedArray.buffer |
+------------------+       +------------------+

第三步:Blob 创建

arduino 复制代码
new Blob([buffer], {type: 'application/octet-stream'})
  • Blob 创建 : 使用 ArrayBuffer 创建 Blob 对象,指定 MIME 类型。Blob 对象表示不可变的、原始数据的类文件对象。 图表模拟:
sql 复制代码
+------------------+       +------------------+
|  ArrayBuffer    |------>|  new Blob()      |
+------------------+       +------------------+
                            |
                            |
                            v
+------------------+       +------------------+
|  Blob Object     |<------>|  {type: 'application/octet-stream'} |
+------------------+       +------------------+

第四步:数据表示

css 复制代码
URL.createObjectURL(blob)
toDataURL
Data URL
Object URL
  • URL.createObjectURL(blob) : 创建一个表示指定 Blob 对象的 URL。
  • toDataURL : Canvas 对象的方法,返回一个表示 Canvas 内容的 Data URL。
  • Data URL: 一种把小文件嵌入到网页中的方法,直接在 URL 中包含文件的数据。
  • Object URL : 一种指向内存中 Blob 对象的 URL,通常用于显示媒体文件或触发下载。 图表模拟:
sql 复制代码
+------------------+       +------------------+
|  Blob Object     |------>|  URL.createObjectURL() |
+------------------+       +------------------+
                            |
                            |
                            v
+------------------+       +------------------+
|  Object URL      |<------>|  blob:http://<origin>/<uuid> |
+------------------+       +------------------+
+------------------+       +------------------+
|  Canvas Object   |------>|  toDataURL()     |
+------------------+       +------------------+
                            |
                            |
                            v
+------------------+       +------------------+
|  Data URL        |<------>|  data:[<mediatype>][;base64],<data> |
+------------------+       +------------------+

第五步:数据保存

vbnet 复制代码
By FileSaver 下载
  • FileSaver : 一个 JavaScript 库,用于将 BlobFile 对象保存为文件,触发浏览器的下载行为。 图表模拟:
sql 复制代码
+------------------+       +------------------+
|  Blob/File Object|------>|  FileSaver.saveAs() |
+------------------+       +------------------+
                            |
                            |
                            v
+------------------+       +------------------+
|  Downloaded File |<------>|  Saved File      |
+------------------+       +------------------+

结束讲解 通过上述步骤,我们从数据的获取、处理、表示到保存,完整地理解了图片中的内容。虽然无法直接绘制图表,但希望这个分步骤的文本描述能帮助您构建一个清晰的概念框架。 [\boxed{ 通过上述分步骤的讲解,我们从数据的获取、处理、表示到保存,完整地理解了图片中的内容。虽然无法直接绘制图表,但希望这个分步骤的文本描述能帮助您构建一个清晰的概念框架。 }]

相关推荐
sunbyte1 小时前
Tailwind CSS 初学者入门指南:项目集成,主要变更内容!
前端·css
可爱的秋秋啊2 小时前
vue3,element ui框架中为el-table表格实现自动滚动,并实现表头汇总数据
前端·vue.js·笔记·elementui
一夜枫林2 小时前
uniapp自定义拖拽排列
前端·javascript·uni-app
IT瘾君4 小时前
JavaWeb:Html&Css
前端·html
264玫瑰资源库4 小时前
问道数码兽 怀旧剧情回合手游源码搭建教程(反查重优化版)
java·开发语言·前端·游戏
喝拿铁写前端4 小时前
从圣经Babel到现代编译器:没开玩笑,普通程序员也能写出自己的编译器!
前端·架构·前端框架
HED4 小时前
VUE项目发版后用户访问的仍然是旧页面?原因和解决方案都在这啦!
前端·vue.js
拉不动的猪5 小时前
前端自做埋点,我们应该要注意的几个问题
前端·javascript·面试
王景程5 小时前
如何测试短信接口
java·服务器·前端
安冬的码畜日常5 小时前
【AI 加持下的 Python 编程实战 2_10】DIY 拓展:从扫雷小游戏开发再探问题分解与 AI 代码调试能力(中)
开发语言·前端·人工智能·ai·扫雷游戏·ai辅助编程·辅助编程