blob url
The Blob interface represents a blob, which is a file-like object of immutable, raw data; they can be read as text or binary data, or converted into a ReadableStream so its methods can be used for processing the data.
# Blob URL 的特点
- 安全性:
- Blob URL 只在当前浏览器会话中有效,无法被外部访问,确保了数据的安全性
- 临时性:
- Blob URL 是临时的,浏览器会在适当的时候自动释放其资源,但也可以通过
URL.revokeObjectURL()手动释放
- Blob URL 是临时的,浏览器会在适当的时候自动释放其资源,但也可以通过
- 高效性:
- 适用于客户端生成和处理数据,而不需要通过服务器提供和传输文件
# 创建和使用 Blob URL
以下是创建和使用 Blob URL 的步骤和示例代码:
1.创建 Blob 对象:
Blob 对象代表一个不可变的、原始数据的类文件对象。Blob 表示的数据并不一定是 JavaScript 原生支持的格式,因此可以用来表示图片、视频、纯文本文件等各种数据类型
// 创建一个 Blob 对象,内容为 "Hello, world!"
const blob = new Blob(['Hello, world!'], { type: 'text/plain' });
2
2.生成 Blob URL:
使用 URL.createObjectURL() 方法生成一个指向 Blob 对象的 URL
const blobURL = URL.createObjectURL(blob);
console.log(blobURL); // 输出类似 "blob:http://example.com/9b2b0f4e-34b4-4d6b-a66d-0b8e4e8b8f56"
2
3.使用 Blob URL:
可以将 Blob URL 用于各种需要 URL 的地方,例如
<a>标签的 href 属性,或者<img>标签的 src 属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Blob URL Example</title>
</head>
<body>
<script>
const blob = new Blob(['Hello, world!'], { type: 'text/plain' });
const blobURL = URL.createObjectURL(blob);
// 创建一个链接,指向 Blob URL
const link = document.createElement('a');
link.href = blobURL;
link.download = 'hello.txt';
link.textContent = 'Download hello.txt';
// 将链接添加到页面
document.body.appendChild(link);
</script>
</body>
</html>
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
# 使用 Blob URL 播放视频
Blob URL 也可以用于视频播放,以下是一个示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Blob URL Video Example</title>
</head>
<body>
<video id="video" controls></video>
<script>
// 创建一个示例 Blob 对象,假设是视频数据
const videoBlob = new Blob(['...'], { type: 'video/mp4' });
const videoBlobURL = URL.createObjectURL(videoBlob);
// 获取视频元素并设置其 src 属性为 Blob URL
const videoElement = document.getElementById('video');
videoElement.src = videoBlobURL;
</script>
</body>
</html>
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
# 抓取 Blob URL 的内容
要抓取指向 Blob URL 的内容,可以使用 fetch API。这通常用于读取本地生成的 Blob 对象,例如从文件输入或 canvas 元素生成的图像
以下是一个简单的例子,展示如何从 Blob URL 抓取内容:
示例: 抓取 Blob URL 的内容
1.创建 Blob URL:
// 创建一个简单的Blob对象,包含一些文本
const blob = new Blob(['Hello, world!'], { type: 'text/plain' });
// 生成Blob URL
const blobUrl = URL.createObjectURL(blob);
console.log(blobUrl); // 例如,blob:http://example.com/12345678-1234-1234-1234-123456789abc
2
3
4
5
6
7
2.使用 fetch 抓取 Blob URL 的内容:
fetch(blobUrl)
.then((response) => response.blob())
.then((blob) => {
// 将Blob对象转换为文本。 blob.type 来判断类型
const reader = new FileReader();
reader.onload = function () {
console.log(reader.result); // 输出Blob内容
};
reader.readAsText(blob); // 读取Blob为文本
})
.catch((error) => {
console.error('Error fetching Blob URL:', error);
});
2
3
4
5
6
7
8
9
10
11
12
13
解释:
- 创建 Blob 对象:
- 创建一个包含文本的 Blob 对象,并生成一个 Blob URL
- 抓取 Blob URL 的内容:
- 使用 fetch API 请求 Blob URL
- fetch 返回一个响应对象,通过调用
response.blob()方法获取 Blob 对象 - 使用 FileReader 读取 Blob 对象,并将其转换为文本
这个示例展示了如何从 Blob URL 读取内容并在控制台中输出。如果你需要处理其他类型的数据(如图像、二进制文件等),可以相应地调整读取 Blob 对象的方法,例如使用 readAsArrayBuffer 或 readAsDataURL