js中的二进制操作相关类型和方法

Blob数据对象

MDN官方解释Blob对象：一个Blob对象就是一个包含有只读原始数据的类文件对象。Blob对象中的数据并不一定得是JavaScript中的原生形式。File接口基于Blob, 继承了Blob的功能，并且扩展支持了用户计算机上的本地文件。

创建Blob对象的方法有几种，可以调用Blob构造函数，还可以使用一个已有Blob对象上的slice()方法切出另一个Blob对象，还可以调用canvas对象上的toBlob方法。

实际上，Blob是计算机通用术语之一，全称写作：BLOB(binary large object)，表示二进制大对象。

在实际web应用中，BLOB更多是图片二进制形式上的上传与下载，虽然可以实现几乎任意文件的二进制传输

var xhr = new XMLHttpRequest();    
xhr.open("get", "mm1.jpg", true);
xhr.responseType = "blob";
xhr.onload = function() {
    if (this.status == 200) {
        var blob = this.response;  // this.response也就是请求的返回就是Blob对象
        var img = document.createElement("img");
        img.onload = function(e) {
          window.URL.revokeObjectURL(img.src); // 清除释放
        };
        img.src = window.URL.createObjectURL(blob);//创建对象URL
        eleAppend.appendChild(img);    
    }
}
xhr.send();

Blob在Web开发中非常重要的一个功能——创建Blob网址。（上例来自理解DOMString、Document、FormData、Blob、File、ArrayBuffer数据类型 ）。

并不是所有的图片都能以Blob形式请求，因为，Blob的本质是ajax，有一定的跨域限制。XHR2支持跨资源共享，还需要对Access-control-allow-origin的设置，允许来自那个域名的 请求。（css3的font-face属性在firefox浏览器下，如果字体文件跨域（包括跨子域），是显示不出来的，也是通过设置Access-control-allow-origin属性解决的）

blob对象的建立有两种方法
使用旧方法创建 Blob 对象。

旧的方法使用 BlobBuilder 来创建一个Blob 实例，并且使用一个 append() 方法，将字符串（或者 ArrayBuffer 或者 Blob，此处用 string 举例）插入，一旦数据插入成功，就可以使用 getBlob() 方法设置一个 mime 。

<script>  
  var builder = new BolbBuilder();  
  builder.append("Hello World!");  
  var blob = builder.getBlob("text/plain");  
</script>  

新方法创建Blob 对象

在新的方法中直接可以通过 Blob() 的构造函数来创建了。
该对象有两个属性
size：Blob对象中所包含数据的大小。字节为单位。只读
type：一个字符串，表明该Blob对象所包好数据的MIME类型（如image/jpeg)，如果类型未知，则该值为空字符串。只读

<script>  
  var blob = new Blob(["Hello World!"],{type:"text/plain"});  
</script>  

var myBlob = new Blob(arrayBuffer)

其中，两个参数的含义是：parts表示一个数组，包含了将要添加到Blob对象中的数据。数组元素可以是任意多个的ArrayBuffer、ArrayBufferView(typed array)、Blob或者DOMString对象
properties表示一个对象，设置Blob对象的一些属性，目前仅支持一个type属性，表示Blob的类型

Blob对象有很重要的方法–slice(),这个方法在FireBox的实现叫mozSlice(),在 Chrome 中的实现叫webkitSlice()。作用是实现文件的分割。该方法的主要用法

blob.slice(start,end,contentType);

其中，contentType表示新的Blob对象的MIME类型，这个值将会成为新的Blob对象的type属性的值，默认为一个空字符串。

通过fileReader类型可以实现对Blob数据的读取。这里大概介绍一下FileReader类型
FileReader类型实现的是一种异步文件读取机制，可以把FileReader想象成XMLHttpRequest，区别只是他读取的是文件系统，而不是远程服务器。为了读取文件的数据，FileReader提供了如下几个方法。

readAsText(file, encoding):以纯文本的形式读取文件，将读取到的文本保存在result属性中。
readAsDataURL(file)：读取文件并将文件一数据URI的形式保存在result属性中
readAsBinaryString(file)(已废弃)：读取文件并将一个字符串保存在result属性中，字符串中的每一个字符表示一字节
readAsArrayBuffer(file)：读取文件并将一个包含文件内容的ArrayBuffer保存在result属性中。

由于读取过程是异步的，因此FileReader也提供了几个事件。其中最有用的三个事件是progress、error和load，分别表示，是否有读取了新的数据，是否发生了错误以及是否已经读完了整个文件。

window.onload = function(){

        var filesList = document.getElementById("files-list");
        EventUtil.addHandler(filesList, "change", function(event){
            var info = "",
                output = document.getElementById("output"),
                progress = document.getElementById("progress"),
                files = EventUtil.getTarget(event).files,
                type = "default",
                reader = new FileReader();

            if (/image/.test(files[0].type)){
                reader.readAsDataURL(files[0]);
                type = "image";
            } else {
                reader.readAsText(files[0]);
                type = "text";
            }

            reader.onerror = function(){
                output.innerHTML = "Could not read file, error code is " + reader.error.code;
            };

            reader.onprogress = function(event){
                if (event.lengthComputable){
                    progress.innerHTML = event.loaded + "/" + event.total;
                }
            };

            reader.onload = function(){

                var html = "";

                switch(type){
                    case "image":
                        html = "<img src=\"" + reader.result + "\">";
                        break;
                    case "text":
                        html = reader.result;
                        break;

                }
                output.innerHTML = html;
            };
        });

ArrayBuffer对象

ArrayBuffer表示二进制数据的原始缓冲区，该缓冲区用于存储各种类型化数组的数据。ArrayBuffer是二进制数据通用的固定长度容器。由于其内部实现与数组不一样，ArrayBuffer通常都是连续内存。

ArrayBuffer存在的意义就是作为数据源提前写入在内存中，长度固定，万年不变。于是，当我们要处理这个ArrayBuffer中的二进制数据，例如，分别8位，16位，32位转换一遍，这个数据都不会发生变化，三种转换共享数据

注意，ArrayBuffer本身是不能读写的，需要借助类型化数组或DataView对象来解释原始缓冲区

Blob对象与ArrayBuffer的区别是除了raw bytes外它还提供了mime type作为元数据。但是它依然是无法直接被读写的。

类型化数组

类型化数组（Typed Array)是js中新出现的一个概念，专为访问原始的二进制数据而生。

类型数组的类型有

本质上，类型化数组和ArrayBuffer是一样的，不过类型化数组是可读写的，而ArrayBuffer只是数据源。也就是说数据时存在ArrayBuffer里的，而Typed Array只是提供了一个某种类型的读写接口。

由于类型化数组直接访问固定内存，因此，速度很快，比传统数组要快，因为普通js数组使用的是Hash查找方法。同时类型化数组天生处理二进制数据，这对于XMLHttpRequest2、canvas、webGL等技术有先天的优势

如果你用过canvas的getImageData/putImageData的话，会发现它给你的就是一个Uint8ClampedArray，这东西访问起来速度比JS的原生Array快很多，使得对canvas进行高速的像素操作成为可能

ArrayBuffer对象自身可以构造。例如：

var buf = new ArrayBuffer(32);

语法为

ArrayBuffer ArrayBuffer(length[可以是很大的数]);

获取二进制数据

在网页中获取二进制数据的常见方法有：通过XMLHttpRequest 2、通过file和Blob相关接口
通过XMLHttpRequest 2
XHR2接口跟XHR几乎是一样的，当指定xhr.responseType = ‘arrraybuffer’以后，在成功获取数据的回调里就可以通过xhr.response来得到请求结果的ArrayBuffer了，然后就可以按照自己的医院构造各种Typed Array进行访问
responseType还可以有blob取值，可以用xhr.response获得Blob 对象。

参考文献：理解DOMString、Document、FormData、Blob、File、ArrayBuffer数据类型
JS中的二进制操作简介
二进制数组
小tip: base64:URL背景图片与web页面性能优化
移动前端—图片压缩上传实践
node-canvas实现百度地图个性化底图绘制