Blob（二进制大对象）方式效果分析

2021-10-08 15:24:02 浏览数 (1)

Blob（二进制大对象）方式效果分析

HTMLCanvasElement.toBlob() 方法创造Blob对象，用以展示canvas上的图片；这个图片文件可以被缓存或保存到本地，由用户代理端自行决定。如不特别指明，图片的类型默认为 image/png，分辨率为96dpi。 语法：

代码语言：javascript复制
void canvas.toBlob(callback, type, encoderOptions);

参数：

  • callback 回调函数，可获得一个单独的Blob对象参数。
  • type 可选 DOMString类型，指定图片格式，默认格式为image/png。
  • encoderOptions 可选 Number类型，值在0与1之间，当请求图片格式为image/jpeg或者image/webp时用来指定图片展示质量。

比如将canvas图像转换为文件，当一个内容画到canvas上时，我们可以将它生成任何一个格式支持的图片文件。比如，下面的代码段获得了id为“canvas”的<canvas>元素中的图像，复制成一个PNG图，在文档中加入一个新的<img>元素，这个<img>元素的源图就是使用canvas创建的那个图像：

代码语言：javascript复制
var canvas = document.getElementById("canvas");

canvas.toBlob(function(blob) {
  var newImg = document.createElement("img"),
      url = URL.createObjectURL(blob);

  newImg.onload = function() {
    // no longer need to read the blob so it's revoked(撤销，删除)
    URL.revokeObjectURL(url);
  };

  newImg.src = url;
  document.body.appendChild(newImg);
});

注意，我们这里创建的是PNG图片；如果在toBlob()传入第二个参数，就可以指定图片格式。例如，生成JPEG格式的图片：

代码语言：javascript复制
canvas.toBlob(function(blob){...}, "image/jpeg", 0.95); // JPEG at 95% quality

2.1 new Blob([new Uint8Array(array)], {type: 'image/png'})

当然CropBox并没有使用toBlob方法，而是直接利用js中的Blob对象类型的构造方法。 语法：

代码语言：javascript复制
var aBlob = new Blob( array, options );

参数：

  • array 是一个由ArrayBuffer, ArrayBufferView, Blob, DOMString 等对象构成的 Array ，或者其他类似对象的混合体，它将会被放进 Blob.
  • options 是一个可选的Blob熟悉字典，它可能会指定如下两种属性： type，默认值为 ""，它代表了将会被放入到blob中的数组内容的MIME类型。 endings，默认值为"transparent"，它代表包含行结束符n的字符串如何被输出。 它是以下两个值中的一个： "native"，代表行结束符会被更改为适合宿主操作系统文件系统的惯例，或者 "transparent", 代表会保持blob中保存的结束符不变 比如：
代码语言：javascript复制
var aFileParts = ['<a id="a"><b id="b">hey!</b></a>']; // an array consisting of a single DOMString
var oMyBlob = new Blob(aFileParts, {type : 'text/html'}); // the blob

用处：

  1. 大文件分割 (slice() 方法)： slice() 方法接受三个参数，起始偏移量，结束偏移量，还有可选的 mime 类型，然后轮循向后台提交各文件片段，即可实现文件的分片上传。
canvas 编程算法

0 人点赞