JavaScript 怎样获取 Blob

在JavaScript开发中，Blob（Binary Large Object）对象用于表示不可变的、原始数据的类文件对象。它可以存储大量的数据，如图片、音频、视频等。那么，如何在JavaScript中获取Blob呢？下面将为你详细介绍几种常见的方法。

方法一：通过new Blob()构造函数创建

使用new Blob()构造函数可以直接创建一个Blob对象。该构造函数接受两个参数：一个是包含要放入Blob中的数据的数组，另一个是可选的配置对象，用于指定Blob的类型（MIME类型）等信息。 示例代码如下：

const data = ['Hello, World!'];
const blob = new Blob(data, { type: 'text/plain' });
console.log(blob);

方法二：从文件输入获取

当用户通过<input type="file">元素选择文件时，可以通过该元素的files属性获取到FileList对象，其中包含了用户选择的文件。而File对象实际上是Blob的子类，因此可以直接将File对象作为Blob使用。 示例代码如下：

<input type="file" id="fileInput">
<script>
const fileInput = document.getElementById('fileInput');
fileInput.addEventListener('change', () => {
  const file = fileInput.files[0];
  console.log(file);
});
</script>

方法三：通过fetch请求获取

使用fetch函数可以发起网络请求，获取远程资源。当获取到资源后，可以通过response.blob()方法将响应数据转换为Blob对象。 示例代码如下：

fetch('https://example.com/image.jpg')
.then(response => response.blob())
.then(blob => {
  console.log(blob);
 });

方法四：从Canvas元素获取

如果在页面中使用了<canvas>元素绘制了图形或图像，可以通过canvas.toBlob()方法将Canvas的内容转换为Blob对象。 示例代码如下：

<canvas id="myCanvas"></canvas>
<script>
const canvas = document.getElementById('myCanvas');
canvas.toBlob(blob => {
  console.log(blob);
}, 'image/png');
</script>

通过以上几种方法，你可以在JavaScript中获取到Blob对象，并根据具体需求进行进一步的处理，如上传、下载、显示等。