转换-Blob URL

title: 转换-Blob URL id: 3b7ff888b9e77bc359acfd2fd4a9d4e9 tags: [] date: 2000/01/01 00:00:00 updated: 2023/05/29 17:18:00 isPublic: true --#|[分隔]|#--

转换-Blob URL

URL.createObjectURL 方法，是一个为页面中的 Blob 或 MediaSource 创建可访问的 url 的方法，多数情况可以用来取代 base64。

使用 URL.createObjectURL 创建出来的 Blob URL，和创建它的页面挂钩，这个 Blob URL 本质类似于是这个页面下的某个变量的「访问地址、索引地址」，所以 Blob URL 长度才那么短，也因此，想要查看 Blob URL 对应的内容，需要能访问到这个页面，所以基本就限定了只能是当前页面使用。

创建完成后的 Blob URL 大概长这样： blob:http://192.168.3.25:1222/1cdb190c-f1f5-47de-a3ae-751a523e1e0f

Blob 可以是html文本、各种格式的File文件（比如用户上传的需要预览的图片）等等。

MediaSource 是媒体数据源，在音视频播放时需要使用的功能，能实时分片接受媒体流后，使用这个Api来拼接、处理，配合 URL.createObjectURL 可以同步播放给用户。

把资源转为 Blob URL 和转为 base64 链接相比的优点：

• Blob URL 更节省性能、更快速。

• Blob URL 更灵活，能配合 MediaSource 提升用户体验。

把资源转为 Blob URL 和转为 base64 链接相比的缺点：

• Blob URL 基本只能当前页面使用(多数用来展示上传图片的预览图)，而base64 则是独立的，创建出来后复制给任何人都可以查看、使用。

注意：Blob URL 创建完成后，资源会一直存在内存中。

除非刷新页面，否则如果想解除内存占用，需要使用：URL.revokeObjectURL(url: string): void; 来解除这个url的占用。

调用后，这个url也就不能使用了。

代码示例：

let string = `<div style="color: red;">跳跳</div>`
let blob = new Blob([string]) // 先转为 blob，这里没有设定这个 string 的type类型
let blobUrl = URL.createObjectURL(blob)
console.log(blobUrl)
// blob:http://192.168.3.25:1222/64982164-1711-44f6-a607-7a316fc60956

// 不再使用时，使用此方法解除内存占用
// URL.revokeObjectURL(blobUrl)

因为我这段代码的服务是本地局域网，所以我可以把上面生成的 Blob URL 粘贴到浏览器中访问，得到的就是 string 原样的文本。

但如果我把代码改成下面：

let string = `<div style="color: red;">跳跳</div>`
let blob = new Blob([string], {type: 'text/html'}) // 先转为 blob，这里设定一下 string 的type类型为html
let blobUrl = URL.createObjectURL(blob)
console.log(blobUrl)
// blob:http://192.168.3.25:1222/dd377e64-d4cc-4227-8c45-fe80f1d45638

// 不再使用时，使用此方法解除内存占用
// URL.revokeObjectURL(blobUrl)

此时在访问 Blob URL，看到的就只有 跳跳 这两个字，并且是红色的，因为浏览器知道这段字符串是 html 类型的，会自动处理。