本文主要从前端(浏览器)和后端(node)环境出发，分别讲述如何用js去调用环境提供的接口，而操控二进制数据
一.浏览器环境
前端环境下，js主要可以调用ArrayBuffer和Blob这两个对象接口
ArrayBuffer
ArrayBuffer 对象是ES6新加入的标准，表示一段二进制数据，用来模拟内存里面的数据。这个对象可以看作内存数据的表达
浏览器原生提供ArrayBuffer()构造函数，用来生成实例。它接受一个整数作为参数，表示这段二进制数据占用多少个字节
var buffer = new ArrayBuffer(8); //实例对象buffer占用8个字节
buffer.byteLength // 8，属性byteLength，表示当前实例占用的内存长度（单位字节）
ArrayBuffer 对象有实例方法slice()，用来复制一部分内存。它接受两个整数参数，分别表示复制的开始位置（从0开始）和结束位置（复制时不包括结束位置），如果省略第二个参数，则表示一直复制到结束
var buf1 = new ArrayBuffer(12); // 生成一个可以12个字节的连续内存，每个字节的默认值是0
var buf2 = buf1.slice(0); //实例buf2复制了buf1
注意:ArrayBuffer不能直接读写，只能通过视图进行操作，所以虽然可以调用，但是前端主要还是使用Blob
Blob
Blob(Binary Large Object 二进制大型对象）,它与 ArrayBuffer 的区别在于，Blob 对象表示一个二进制文件的数据内容，比如一个图片文件的内容就可以通过 Blob 对象读写,它用于操作二进制文件，而 ArrayBuffer 用于操作内存
Blob构造函数接受两个参数。第一个参数是数组，成员是字符串或二进制对象，表示新生成的Blob实例对象的内容；第二个参数是可选的，是一个配置对象，目前只有一个属性type，它的值是一个字符串，表示数据的 MIME 类型，默认是空字符串
//用Blob保存json数据
var obj = { name: 'qgq' };
var blob = new Blob([ JSON.stringify(obj) ], {type : 'application/json'});
Blob具有两个实例属性size和type，分别返回数据的大小和类型，实例方法slice,用来拷贝原来的数据，返回的也是一个Blob实例
Blob的应用
1.浏览器点击下载功能
<a download="data.txt" id="getData">下载</a>
var data= 'Hello world!';
var blob = new Blob([data], {
type: 'text/html,charset=UTF-8'
});
window.URL = window.URL || window.webkitURL;
document.querySelector("#getData").href = URL.createObjectURL(blob);
上面的代码将Blob URL赋值给a标签，点击后，会提示下载文本文件为data.txt，文件内容为“Hello World”
2.分割大文件上传(利用Blob中slice方法)
function upload(blobOrFile){
var xhr = new XMLHttpRequest();
xhr.open('POST','/server/upload',true);
xhr.onload = function(e) { ... };
xhr.send(blobOrFile);
}
document.querySelector('input[type="file"]').addEventListener('change' , function(e){
var blob = this.files[0];
const BYTES_PER_CHUNK = 1024 * 1024; //1MB chunk size
const SIZE = blob.size;
var start = 0;
var end = BYTES_PER_CHUNK;
while(start < SIZE){
upload(blob.slice(start, end));
start = end;
end = start + BYTES_PER_CHUNK;
}
},false);
3.解决canvas图片跨域
如果想要获取一张图片上某个像素点的色值，可以使用canvas的getImageData来拿到数据，但是在canvas中，跨域图片是不能获取其图像信息的，如果取跨域的图片像素信息，就会出现跨域错误
//下面代码会报错The canvas has been tainted by cross-origin data.
const url = 'https://developer.mozilla.org/static/img/web-docs-sprite.22a6a085cf14.svg'
const img = new Image()
img.onload = function () {
ctx.drawImage(img, 0, 0)
addEventListener('click', pick)
}
img.src = url
function pick (e) {
const data = ctx.getImageData(e.layerX, e.layerY, 1, 1).data
console.log(data)
}
解决这个问题，首先服务端运行该资源跨域访问，另外，在img上添加一个crossOrigin
另可以通过Blob来解决
const url = 'https://developer.mozilla.org/static/img/web-docs-sprite.22a6a085cf14.svg'
const xhr = new XMLHttpRequest()
xhr.open('GET', url, true)
xhr.responseType = 'blob'
xhr.onload = function () {
if (this.status === 200) {
const blob = this.response
const img = new Image()
const imgObject = URL.createObjectURL(blob)
img.onload = function () {
ctx.drawImage(img, 0, 0)
canvas.addEventListener('click', pick)
document.body.removeChild(img)
URL.revokeObjectURL(imgObject)
}
img.src = imgObject
document.body.appendChild(img)
}
}
xhr.send()
function pick (e) {
const data = ctx.getImageData(e.layerX, e.layerY, 1, 1).data
console.log(data)
}
4.隐藏视频原路径，blob:http://
<video controls id='sound'/>
<script>
var xhr = new XMLHttpRequest();
xhr.open('POST','./server/video',true);
xhr.responseType = 'blob';
xhr.onload = function(e){
if(this.status == 200){
var blob = this.response;
document.getElementById("sound").src = URL.createObjectURL(blob);
}
}
xhr.send();
</script>
二.node环境
二进制数组，用来处理二进制数据的类
二进制数组由三类对象组成:
1.ArrayBuffer对象:前面也介绍了，代表内存中原始的二进制数据，本身不能直接读写，需要通过视图来操作
2.TypedArray视图:共包括 9 种类型的视图，比如Uint8Array（无符号 8 位整数）数组视图, Int16Array（16 位整数）数组视图, Float32Array（32 位浮点数）数组视图等等
3.DataView视图:可以自定义复合格式的视图，比如第一个字节是 Uint8（无符号 8 位整数）、第二、三个字节是 Int16（16 位整数）、第四个字节开始是 Float32（32 位浮点数）等等，此外还可以自定义字节序
Node中的Buffer类是以更优化和更适合Nodejs的方式实现了Uint8Array API，意思就是Buffer类其实是TypedArray(Uint8Array)的nodejs实现
ArrayBuffer有一个静态方法isView，判断参数是否为视图实例
const buffer = new ArrayBuffer(12);
buffer.byteLength; // 12
buffer.slice(0, 3); // 用法和数组一致，拷贝buffer的前三个字节生成一个新的ArrayBuffer对象
ArrayBuffer.isView(buffer); // false
const dataView = new DataView(buffer);
ArrayBuffer.isView(dataView); // true
![leetcode电话号码的字母组合[图]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)