前端将二进制数据流转为文件_前端进阶：二进制数据的操控----附项目代码

引言： 近期，工作中发现，有些前端小伙伴很少接触到二进制数据，所以将项目中二进制数据的应用和大家分享一下，适合入门了解，高手慎入，欢迎拍砖。

项目背景： 基于公司原有图形处理的二进制数据文件(公司自定义的二进制数据格式)，实现Canvas绘图。

话说：项目开始的时候我也是一脸懵逼，这么多技术难点需要攻克，1. 如何请求二进制数据流？2. 如何解压二进制数据？3. 如何读取二进制数据？……

接下来我们一一攻破：见招拆招

1. 数据请求arraybuffer：

基于ajax请求，设置接受的数据格式为arraybuffer类型，基于流文件的读取是需要异步来处理的，否则数据可能有丢失。

let oReq = null;

if (window.XMLHttpRequest) {

oReq = new XMLHttpRequest();

}

else {

oReq = new ActiveXObject('Microsoft.XMLHTTP');

}

oReq.onprogress = this.updateProgress;//下载进度；

oReq.responseType = "arraybuffer";

oReq.onload = function () {

// 数据下载完成会触发；