使用 JavaScript object URLs,可以处理图像、音频和视频

开发 前端
在这篇文章中,我们来看看如何使用object URL来引用可以使用DOM文件对象引用的数据。

许多Web应用程序需要在前端处理文件输入,或者将文件上传到后端。

在这篇文章中,我们来看看如何使用object URL来引用可以使用DOM文件对象引用的数据。

使用object URLs

我们可以调用 URL.createObjectURL 来从文件对象中创建一个URL字符串对象,方法如下。

  1. const objectURL = window.URL.createObjectURL(fileObj); 

然后,我们可以在URL字符串对象上调用 revokeURL 以从内存中释放URL资源:

  1. URL.revokeObjectURL(objectURL); 

使用object URLs 显示图片

例如,我们可以使用 createObjectURL 方法在 img 元素中显示选定的图像文件,如下所示。

首先,我们编写以下HTML:

  1. <input type="file"  accept="image/*"> 
  2. <img /> 

然后,我们可以编写以下代码来侦听文件输入的change事件,然后使用 createObjectURL 设置 img 元素的 src 属性,如下所示:

  1. const fileInput = document.querySelector('input'); 
  2. const img = document.querySelector('img'); 
  3. fileInput.onchange = () => { 
  4.   const file = fileInput.files[0]; 
  5.   img.src = URL.createObjectURL(file); 
  6.   img.onload = () => { 
  7.     URL.revokeObjectURL(img.src); 
  8.   } 

在上面的代码中,我们在选定的文件对象 file 上调用了 createObjectURL 来创建可以设置为 src 属性值的URL。然后,在加载图像时,我们调用 revokeObjectURL 清除用于创建URL的资源。

使用object URLs 显示PDF

我们还可以使用object URL来显示PDF。我们使用相同的 crateObjectURL 方法,但将其设置为 iframe 的URL而不是img元素。

例如,我们可以编写以下HTML:

  1. <input type="file" > 
  2. <iframe> 

然后,我们可以将 src 属性设置为PDF对象URL的iframe,如下所示:

  1. const fileInput = document.querySelector('input'); 
  2. const iframe = document.querySelector('iframe'); 
  3. fileInput.onchange = () => { 
  4.   const file = fileInput.files[0]; 
  5.   const objUrl = URL.createObjectURL(file); 
  6.   iframe.setAttribute('src', objUrl); 
  7.   URL.revokeObjectURL(objUrl); 

我们使用 createObjectURL 和上传的PDF文件来创建Object URL字符串。然后我们可以为其设置 src 属性。然后,PDF将显示在Firefox的iframe中。

将 object URLs 与其他文件类型一起使用

Object URL也可以与其他文件类型一起使用。例如,我们可以选择一个视频文件并通过编写以下代码来播放它。首先,我们编写以下HTML代码:

  1. <input type='file' /> 
  2. <video controls /> 

然后,要播放从文件输入中选择的视频文件,我们编写:

  1. const fileInput = document.querySelector('input'); 
  2. const video = document.querySelector('video'); 
  3. fileInput.onchange = async () => { 
  4.   const file = fileInput.files[0]; 
  5.   const objUrl = URL.createObjectURL(file); 
  6.   video.src = objUrl
  7.   await video.play(); 
  8.   URL.revokeObjectURL(objUrl); 

在上面的代码中,我们有一个异步函数,该函数从选定的视频文件创建Object URL。然后,将Object URL设置为video元素的src属性。

然后,我们调用视频 play 以播放视频。 play 方法返回一个Promise,因此我们必须添加一个 await 等待该Promise的解决。

完成此操作后,我们可以在Object URL上调用 revokeObjectURL 以释放资源。

总结

我们可以创建Object URL并将其设置为各种元素的src属性,以显示或播放它们。在大多数浏览器中,它都可以处理图像,音频和视频。

责任编辑:赵宁宁 来源: 今日头条
相关推荐

2022-08-12 08:38:52

FFmpegLinux命令

2010-10-08 10:03:52

JavaScript图像

2023-01-05 16:51:04

机器学习人工智能

2019-09-10 10:44:29

物联网工业物联网智慧农业

2010-02-02 17:18:16

Python图像处理

2024-05-06 11:12:22

图像处理数学计算NumPy

2023-03-09 15:25:49

2015-08-26 10:27:33

2016-10-31 20:21:05

LinuxOctave音频文件

2016-10-31 19:41:50

LinuxOctave音频文件

2023-11-24 09:26:29

Java图像

2022-07-18 08:48:06

HtmxHTML

2016-09-12 14:42:24

LinuxOctave音频文件

2020-05-09 11:15:12

JavaScript图像处理 开源

2020-06-16 08:39:35

JavaScript图像处理库

2020-05-12 11:35:53

JavaScript开源技术

2023-11-23 11:37:13

JavaScript数组

2023-07-26 08:48:36

AForge库.NET

2009-06-10 21:51:42

JavaScript XMLFirefox

2022-09-08 09:42:26

JavaScripMapObject
点赞
收藏

51CTO技术栈公众号