前端二进制数据处理、互转及应用场景

Blob

简介

Blob 对象表示一个不可变、原始数据的类文件对象.
具体属性方法可参照mdn-Blob.

获取

构造函数

new Blob( array, options ).
array参数由ArrayBuffer, ArrayBufferView, Blob, DOMString 等对象构成的 Array。

dataURL转换

function dataURLtoBlob(dataUrl) {
    let arr = dataUrl.split(','),
    //获取dataUrl的MIME类型
    mime = arr[0].match(/:(.*?);/)[1],
    //将dataUrl中的data数据部分进行base-64解码
    bstr = atob(arr[1]),
    n = bstr.length, 
    //创建TypedArray，并指定长度
    u8arr = new Uint8Array(n);
    while(n--){
        //进行Unicode的编码并存入TypedArray
        u8arr[n] = bstr.charCodeAt(n);
    }
    //返回创建的Blob对象
    return new Blob([u8arr], {type:mime});
}

补充

blob:http ：
经常看视频的同学点开F12会发现，不少视频都是用blob:http 作为src的，这样可以防止直接下载，如腾讯视频里一人之下某集的video路径为blob:https://v.qq.com/27c0e127-b316-4c77-8196-ed09f029578d。
创建方法：URL.createObjectURL(blob)

ArrayBuffer

简介

ArrayBuffer对象表示内存中一段原始二进制数据缓冲区。可以通过TypedArray或DataView进行操作。
关于TypedArray和DataView不在此介绍，请自行参照mdn等。

获取

构造函数

new ArrayBuffer(length)
参数length为创建的 ArrayBuffer 的字节

使用FileReader处理，blob||File=>ArrayBuffer

1、FileReader.readAsArrayBuffer(blob)
读取指定的Blob中的内容为ArrayBuffer，File对象也可以，File 对象是特殊类型的 Blob
2、FileReader.onload
读取完成后load触发，在触发函数中通过FileReader.result获取结果

利用TypedArray

TypedArray视图的实例都有buffer属性，
能生成TypedArray的即可获取到ArrayBuffer
如：array=>ArrayBuffer

let u8= new Uint8Array([240, 160, 174, 183]);
let buffer = u8.buffer;

字符串=>ArrayBuffer

//摘自阮一峰ECMAScript 6 入门，用ts类型签名表示参数和返回类型
//ArrayBuffer转字符串
function ab2str(
  input: ArrayBuffer | Uint8Array | Int8Array | Uint16Array | 		Int16Array | Uint32Array | Int32Array,
  outputEncoding: string = 'utf8',
): string {
  const decoder = new TextDecoder(outputEncoding)
  return decoder.decode(input)
}
//字符串转ArrayBuffer
function str2ab(input: string): ArrayBuffer {
  const view = str2Uint8Array(input)
  return view.buffer
}
function str2Uint8Array(input: string): Uint8Array {
  const encoder = new TextEncoder()
  const view = encoder.encode(input)
  return view
}

Data URLs

简介

所谓Data URLs，即前缀为 data: 协议的URL，其允许内容创建者向文档中嵌入小文件。比如常用的，将较小的图片转为base64的dataURL，减少请求。

组成部分

data:[<mediatype>][;base64],<data>
即前缀(data:)、MIME类型、base64标记、数据本身。
其中mediatype 默认为text/plain;charset=US-ASCII，可选
base64如果非文本则为可选

base64

base64是用于传输8Bit字节码的一种编码方式
在js中：
atob() 函数能够解码通过base-64编码的字符串数据
btoa() 函数能够从二进制数据“字符串”创建一个base-64编码的ASCII字符串。
除了字符串ArrayBuffers也可以利用btoa方法进行转换：

function transformArrayBufferToBase64 (buffer) {
    var binary = '';
    //用Uint8Array描述buffer对象
    var bytes = new Uint8Array(buffer);
    //遍历拼接
    for (var len = bytes.byteLength, i = 0; i < len; i++) {
        //将 Unicode 编码转为一个字符
        binary += String.fromCharCode(bytes[i]);
    }
    return btoa(binary);
}

获取

canvas

HTMLCanvasElement.toDataURL(type, encoderOptions)

type 可选,图片格式,默认为 image/png
encoderOptions 可选:在指定图片格式为 image/jpeg 或 image/webp的情况下，可以从 0 到 1 的区间内选择图片的质量。如果超出取值范围，将会使用默认值 0.92。其他参数会被忽略。

使用FileReader处理，blob||File=>dataURL

1、FileReader.readAsDataURL(blob)
读取指定的Blob中的内容为dataurl，File对象也可以，File 对象是特殊类型的 Blob
2、FileReader.onload
读取完成后load触发，在触发函数中通过FileReader.result获取结果

应用

前端关于二进制的应用其实还是有不少的：
1、视频等大文件的分片上传
2、音频的可视化处理
等等…
使用http传输二进制时记得指定：
content-type （内容类型）
responseType （服务器响应的数据类型）
websocket传输指定：
binaryType（数据类型）

容我哔哔一下

第一次写技术博客，水平有限，写的也比较浅显（看到不觉得，写起来感觉还是蛮费时间的，有些东西就省略了），如果有错误希望各位能多多指正。

参考

以下是文章中有参考的地址：
https://es6.ruanyifeng.com/#docs/arraybuffer
https://blog.csdn.net/cuixiping/article/details/45932793.