createObjectURL详解
createObjectURL详解:https://www.python100.com/html/0K200Q39ZYEO.html
createObjectURL详解
更新:2023-05-24 17:20createObjectURL是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、兼容性问题和内存限制等问题。
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 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 博客搭建