前端中的二进制

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 表示一个不可变、原始数据的类文件对象

1. 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"}
});

2. 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 字符串的格式表示出来

1. 两个常用的方法

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)
}