createObjectURL详解

createObjectURL详解:https://www.python100.com/html/0K200Q39ZYEO.html

 

createObjectURL详解

更新:2023-05-24 17:20

createObjectURL是JavaScript中一个非常有用的函数,它可以将Blob、File等二进制文件转换为浏览器可以直接显示的URL地址,从而方便进行展示、下载等操作。

一、什么是Blob

Blob(二进制大对象)是几乎所有二进制数据的一种抽象,类似于File对象。Blob表示了一段二进制数据,可以用来存储图片、音频、视频等多媒体文件。我们可以使用Blob构造函数来创建一个Blob对象,如下:

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

这里我们创建一个包含了"Hello, World!"的文本类型的Blob对象,这个对象可以转换为URL地址供我们使用。

二、createObjectURL的基本用法

创建一个Blob对象后,我们可以使用createObjectURL方法将其转换为URL地址。

const blob = new Blob(['Hello, World!'], { type: 'text/plain' });
const url = URL.createObjectURL(blob);

上述代码中,我们使用Blob构造函数创建了一个包含"Hello, World!"的文本类型的Blob对象,并使用createObjectURL方法将其转换为URL地址存储在url变量中。

最终,我们可以将其插入到页面中进行展示或下载。

三、使用Blob下载或展示文件

通过Blob和createObjectURL,我们可以实现文件的下载或展示。

1. 展示图片

// HTML代码
<img src="blob:{url}">

// JavaScript代码
const blob = new Blob([arrayBuffer], { type: 'image/png' });
const url = URL.createObjectURL(blob);

上述代码中,我们将一个二进制的图片文件放入Blob对象中,并使用createObjectURL方法将其转换为URL地址。然后我们在HTML代码中使用img标签展示图片。此时,img的src属性为"blob:{url}"。

2. 下载文件

//HTML代码
<a href="blob:{url}" download="filename.txt">Download File</a>

//JavaScript代码
const blob = new Blob(['Hello, World!'], { type: 'text/plain' });
const url = URL.createObjectURL(blob);

上述代码中,我们将一个包含"Hello, World!"文本字符串的Blob对象转换为URL地址,并使用a标签展示。a标签的href属性为"blob:{url}",download属性为需要下载的文件名称。

四、注意事项

虽然createObjectURL非常灵活方便,但是它也有一些需要注意的事项。

1. 释放URL

使用完URL后,需要手动释放。否则可能会导致内存泄漏和性能问题。

URL.revokeObjectURL(url);

2. 不支持IE

IE浏览器不支持createObjectURL方法,需要手动实现下载功能。

代码示例:

var xhr = new XMLHttpRequest();
xhr.open('GET', url, true);
xhr.responseType = 'blob';
xhr.onload = function() {
  if (this.status === 200) {
    var blob = new Blob([this.response], { type: 'image/png' });
    if (window.navigator.msSaveOrOpenBlob) {
      window.navigator.msSaveOrOpenBlob(blob, 'file.png');
    } else {
      var url = window.URL.createObjectURL(blob);
      window.location.href = url;
    }
  }
};
xhr.send();

3. 内存限制

将大文件转换为URL地址可能会导致内存问题。所以尽量使用流或者分片等方式。

五、总结

createObjectURL是使用JS展示和下载二进制文件非常便捷的方法。使用它可以实现图片、音频、视频、文本等多种文件的下载、展示等实现。然而,需要注意释放URL、兼容性问题和内存限制等问题。

posted on   byd张小伟  阅读(9180)  评论(1编辑  收藏  举报

相关博文:
阅读排行:
· DeepSeek “源神”启动!「GitHub 热点速览」
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· 我与微信审核的“相爱相杀”看个人小程序副业
· C# 集成 DeepSeek 模型实现 AI 私有化(本地部署与 API 调用教程)
· spring官宣接入deepseek,真的太香了~
历史上的今天:
2019-10-23 nodejs 写服务器解决中文乱码问题
2019-10-23 Node.js文件系统、路径的操作函数
2019-10-23 原生js实现上拉加载
2019-10-23 解决node.js使用fs读取文件出错
2019-10-23 Node.js 博客搭建
< 2025年2月 >
26 27 28 29 30 31 1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 1
2 3 4 5 6 7 8

统计

点击右上角即可分享
微信分享提示