本篇内容介绍了“ArrayBuffer、Uint8Array、Blob与文本字符相互转换的方法”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!
API介绍
前端 File 上传、下载,Canvas 保存图片,Ajax 和 Fetch 二进制流传输,PDF 预览,浏览器上 WebAssembly 的应用 等等都需要用到 ArrayBuffer 和 Blob 。文件就具体介绍一下这些对象的相互转换。
FileReader
对象允许Web应用程序异步读取存储在用户计算机上的文件(或原始数据缓冲区)的内容,使用 File
或 Blob
对象指定要读取的文件或数据。
Blob
对象表示一个不可变、原始数据的类文件对象。它的数据可以按文本或二进制的格式进行读取,也可以转换成 ReadableStream
来用于数据操作。Blob
表示的不一定是 JavaScript
原生格式的数据。File
接口基于 Blob
,继承了 blob
的功能并将其扩展使其支持用户系统上的文件。
ArrayBuffer
对象代表储存二进制数据的一段内存,它不能直接读写,只能通过视图(TypedArray
视图和 DataView
视图)来读写,视图的作用是以指定格式解读二进制数据。
Uint8Array
对象是 ArrayBuffer
的一个数据类型(8 位不带符号整数)。
TextEncoder
接受代码点流作为输入,并提供 UTF-8
字节流作为输出。
TextDecoder
接口表示一个文本解码器,一个解码器只支持一种特定文本编码,例如 utf-8、iso-8859-2、koi8、cp1261,gbk 等等。解码器将字节流作为输入,并提供代码点流作为输出。
注意: 二进制数组并不是真正的数组,而是类似数组的对象。
字符与ArrayBuffer,Uint8Array相互转换
TextEncoder
=> ArrayBuffer
let encoder = new TextEncoder(); // 字符 转 Uint8Array let uint8Array = encoder.encode("你好啊"); // Uint8Array 转 ArrayBuffer let arrayBuffer = uint8Array.buffer
Blob
=> ArrayBuffer
let str = 'hello,你好吗?' let blob = new Blob([str],{type:'text/plain;charset=utf-8'}); let utf8decoder = new TextDecoder() blob.arrayBuffer().then(buffer=>{ // ArrayBuffer console.log(buffer) let text = utf8decoder.decode(buffer) // String console.log(text) })
FileReader
=> ArrayBuffer
let str = 'hello,你好吗?' let blob = new Blob([str],{type:'text/plain;charset=utf-8'}); let utf8decoder = new TextDecoder() let fr = new FileReader() fr.readAsArrayBuffer(blob) fr.onload = function(res) { // ArrayBuffer let buffer = fr.result console.log(buffer) let text = utf8decoder.decode(buffer) // String console.log(text) }
“ArrayBuffer、Uint8Array、Blob与文本字符相互转换的方法”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识可以关注恰卡网网站,小编将为大家输出更多高质量的实用文章!