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

最新推荐文章于 2024-08-02 22:18:37 发布

charlene程程

最新推荐文章于 2024-08-02 22:18:37 发布

阅读量9.1k

点赞数

分类专栏： javascript 文章标签： javascript 二进制

本文链接：https://blog.csdn.net/charlene0824/article/details/51340238

版权

这篇博客介绍了JavaScript中处理二进制数据的相关类型和对象，包括Blob对象用于文件上传下载，ArrayBuffer作为二进制数据的原始缓冲区，以及类型化数组提供对原始缓冲区的读写接口。Blob对象的创建、slice方法和与FileReader的结合使用在读取二进制数据时起关键作用，ArrayBuffer则作为不可直接读写的二进制数据容器，需要借助类型化数组或DataView进行操作。此外，还提到了通过XMLHttpRequest 2获取二进制数据的方法。

摘要由CSDN通过智能技术生成

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 对象。