引言: 近期,工作中发现,有些前端小伙伴很少接触到二进制数据,所以将项目中二进制数据的应用和大家分享一下,适合入门了解,高手慎入,欢迎拍砖。
项目背景: 基于公司原有图形处理的二进制数据文件(公司自定义的二进制数据格式),实现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 () {
// 数据下载完成会触发;