前端中的二进制
程序员文章站
2022-04-15 23:22:13
ArrayBufferArrayBuffer:用来表示通用的、固定长度的原始二进制数据缓冲区。它是一个字节数组,通常在其他语言中称为 byte arrayTypedArrayTypedArray :它是一个指定特定元素类型(Int8Array)的统称,详情见 MDNlet buffer = new ArrayBuffer(8); // 8个字节的ArrayBufferconsole.log(buffer.byteLength); // 8字节const int8Array = new...
ArrayBuffer
-
ArrayBuffer
:用来表示通用的、固定长度的原始二进制数据缓冲区。它是一个字节数组,通常在其他语言中称为byte array
TypedArray
-
TypedArray
:它是一个指定特定元素类型(Int8Array)的统称,详情见 MDN
let buffer = new ArrayBuffer(8); // 8个字节的ArrayBuffer
console.log(buffer.byteLength); // 8字节
const int8Array = new Int8Array(buffer);
console.log(int8Array.length); // 元素的长度 1个字节占用8个位
console.log(int8Array.buffer===buffer); // true
let int16Array = new Int16Array(buffer);
console.log(int16Array.length); // 4字节
DataView
-
DataView
:可以从ArrayBuffer
对象中读写多种数值类型的底层接口使用它时不用考虑不同平台的字节序(大小端)问题
let buffer = new ArrayBuffer(2); //2个字节的ArrayBuffer
console.log(buffer.byteLength); //2
let dataView = new DataView(buffer);
console.log(dataView.buffer === buffer); // true
dataView.setInt8(0, 1);
dataView.setInt8(1, 2);
console.log(dataView.getInt8(0)); //1
console.log(dataView.getInt8(1)); //2
console.log(dataView.getInt16(0)); // 取一个二个字节(16位的整数) [0,0,0,0,0,0,0,1,0,0,0,0,0,0,1,0] = 258
- DataView和TypeArray都 内部引用了buffer, 所以都有.buffer
Blob
- Blob 表示一个不可变、原始数据的类文件对象
- Blob 可以借助 FileReader 转化为其他形式
let debug = {name:'limy'};
let str = JSON.stringify(debug);
console.log(str); // {"name":"limy"}
let blob = new Blob([str],{type:'application/json'});
console.log('blob.size',blob.size); // 15
//同样一个blob可以被读成各种类型
function readBlob(blob,type){
return new Promise(function(resolve){
let reader = new FileReader();
reader.onload = function(event){
resolve(event.target.result);
}
switch(type){
case 'ArrayBuffer':
reader.readAsArrayBuffer(blob);
break;
case 'DataURL'://二进制数据转成可读的字符串 base64字符串
reader.readAsDataURL(blob);
break;
case 'Text':
reader.readAsText(blob,'utf-8');
break;
default:
break;
}
});
}
readBlob(blob,'ArrayBuffer').then(result=>{
console.log(result); // 一个arraybuffer对象,可以通过浏览器看下
});
readBlob(blob,'DataURL').then(result=>{
console.log(result); // base64格式 data:application/json;base64,eyJuYW1lIjoibGlteSJ9
});
readBlob(blob,'Text').then(result=>{
console.log(result); // {"name":"limy"}
});
- Blob 下载 | 图片显示
const a = document.createElement('a')
a.href = window.URL.createObjectURL(blob) // 生成的这个url可以放到 src中完成图片显示
a.target = '_blank'
a.download = fileName
document.body.appendChild(a)
a.click()
document.body.removeChild(a)
Base64
- Base64是一组相似的二进制到文本(binary-to-text)的编码规则,使得二进制数据在解释成 radix-64 的表现形式后能够用 ASCII 字符串的格式表示出来
- 两个常用的方法
let encodedData = window.btoa("Hello, world"); // "SGVsbG8sIHdvcmxk"
let decodedData = window.atob(encodedData); // "Hello, world"
常用转换
function bufferToBlob(buffer){
return new Blob([buffer])
}
function blobToBuffer(blob) {
const reader = new FileReader();
reader.onload = function(e) { // 这里是异步结果不能直接获取
console.log(reader.result)
}
reader.readAsArrayBuffer(blob);
}
function blobToDataURL(blob){
return window.URL.createObjectURL(blob)
}
function dataURLtoBlob(dataurl) {
var arr = dataurl.split(','),
mime = arr[0].match(/:(.*?);/)[1],
bstr = atob(arr[1]),
n = bstr.length,
u8arr = new Uint8Array(n);
while (n--) {
u8arr[n] = bstr.charCodeAt(n);
}
return new Blob([u8arr], {
type: mime
});
}
function arrayBufferToBase64(bytes) {
let binary = ''
const len = bytes.byteLength
for (var i = 0; i < len; i++) {
binary += String.fromCharCode(bytes[ i ])
}
return window.btoa(binary)
}
本文地址:https://blog.csdn.net/qq1154479896/article/details/107414380
推荐阅读
-
Thinkphp中的volist标签用法简介
-
Ubuntu中Opencv的安装使用教程
-
使用Python3中的gettext模块翻译Python源码以支持多语言
-
使用jQuery快速解决input中placeholder值在ie中无法支持的问题
-
用Python的pandas框架操作Excel文件中的数据教程
-
Oracle中scope=both和scope=spfile选项的作用讲解
-
Jquery中$(document).ready(function(){ })函数的使用详解
-
jQuery中.live()方法的用法深入解析
-
jQuery中验证表单提交方式及序列化表单内容的实现
-
网站运营中怎么降低高的跳出率?