JavaScript 之 Blob 对象类型

BLOB:

BLOB,二进制大对象,是一个可以存储二进制文件的容器。
在计算机中,BLOB常常是数据库中用来存储二进制文件的字段类型。
BLOB是一个大文件,典型的BLOB是一张图片或一个声音,由于它们的尺寸,必须使用特殊的方式来处理(例如:上传、下载或者存放到一个数据库)。
它也可能引发一些问题,如存储的二进制文件过大,会使数据库的性能下降。在数据库中存放体积较大的多媒体对象就是应用程序处理BLOB的典型例子。
**在Web领域,Blob被定义为包含只读数据的类文件对象。**Blob中的数据不一定是js原生数据形式。常见的File接口就继承自Blob,并扩展它用于支持用户系统的本地文件。

构建一个Blob对象通常有三种方式:
1.通过BLOB对象的构造函数来创建。
2.从已有的Blob对象调用slice接口切出一个新的Blob对象。
3.canvas API toBlob 方法,把当前绘制信息转换为一个Blob对象。

方法一:构造函数来构建

var blob = new Blob(array[optional], options[optional]);

构造函数,接受两个参数

第一个参数:为一个数据序列,可以是任意格式的值,例如,任意数量的字符串,Blobs 以及 ArrayBuffers。
第二个参数:用于指定将要放入Blob中的数据的类型(MIME)(后端可以通过枚举MimeType,获取对应类型:

MimeType mimeType = MimeType.toEnum(file.getContentType());)。

例:

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

第一种:创建一个装填DOMString对象的blob对象
在这里插入图片描述
第二种:创建一个装填ArrayBuffer对象的Blob对象
在这里插入图片描述
第三种:创建一个装填ArrayBufferView对象的Blob对象(ArrayBufferView可基于ArrayBuffer创建,返回值是一个类数组。如下,创建一个8字节的ArrayBuffer,在其上创建一个每个数组元素为2字节的“视图”)
在这里插入图片描述

Blob对象的基本属性:

size :Blob对象包含的字节数。(只读)
type : Blob对象包含的数据类型MIME,如果类型未知则返回空字符串。

方法二:
大文件分割 (slice() 方法),slice方法与数组的slice类似。

Blob.slice([start, [end, [content-type]]])

slice() 方法接受三个参数,起始偏移量,结束偏移量,还有可选的 mime 类型。如果 mime 类型,没有设置,那么新的 Blob 对象的 mime 类型和父级一样。

当要上传大文件的时候,此方法非常有用,可以将大文件分割分段,然后各自上传,因为分割之后的 Blob 对象和原始的是独立存在的。

不过目前浏览器实现此方法还没有统一,火狐使用的是 mozSlice() ,Chrome 使用的是 webkitSlice() ,其他浏览器则正常的方式 slice()

可以写一个兼容各浏览器的方法:

  function sliceBlob(blob, start, end, type) {
      type = type || blob.type;
      if (blob.mozSlice) {
          return blob.mozSlice(start, end, type);
      } else if (blob.webkitSlice) {
          return blob.webkitSlice(start, end type);
      } else {
          throw new Error("This doesn't work!");
      }
    }

例:
在这里插入图片描述
方法三:通过canvas.toBlob()

var canvas = document.getElementById("canvas");
canvas.toBlob(function(blob){
console.log(blob);
});

使用 Blob 创建一个指向类型化数组的URL

var typedArray = GetTheTypedArraySomehow();
var blob = new Blob([typedArray.buffer], {type: 'application/octet-stream'}); // 传入一个合适的 MIME 类型
var url = URL.createObjectURL(blob);

从 Blob 中提取数据
从Blob中读取内容的唯一方法是使用 FileReader。以下代码将 Blob 的内容作为类型数组读取:

var reader = new FileReader();
reader.addEventListener("loadend", function() {
   // reader.result 包含被转化为类型数组 typed array 的 blob
});
reader.readAsArrayBuffer(blob);

注:下载文件或图片可以直接使用a链接

 const link = document.createElement('a');
 link.style.display = 'none';
 link.href = url;
 document.body.appendChild(link);
 link.click();
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值