如何使用 JavaScript object URLs进行图像音频和视频的处理
本篇文章为大家展示了如何使用 JavaScript object URLs进行图像音频和视频的处理,内容简明扼要并且容易理解,绝对能使你眼前一亮,通过这篇文章的详细介绍希望你能有所收获。
许多Web应用程序需要在前端处理文件输入,或者将文件上传到后端。
使用object URLs
我们可以调用 URL.createObjectURL 来从文件对象中创建一个URL字符串对象,方法如下。
const objectURL = window.URL.createObjectURL(fileObj);
然后,我们可以在URL字符串对象上调用 revokeURL 以从内存中释放URL资源:
URL.revokeObjectURL(objectURL);
使用object URLs 显示图片
例如,我们可以使用 createObjectURL 方法在 img 元素中显示选定的图像文件,如下所示。
首先,我们编写以下HTML:
<input type="file" accept="image/*"> <img />
然后,我们可以编写以下代码来侦听文件输入的change事件,然后使用 createObjectURL 设置 img 元素的 src 属性,如下所示:
const fileInput = document.querySelector('input'); const img = document.querySelector('img'); fileInput.onchange = () => { const file = fileInput.files[0]; img.src = URL.createObjectURL(file); img.onload = () => { URL.revokeObjectURL(img.src); } }
在上面的代码中,我们在选定的文件对象 file 上调用了 createObjectURL 来创建可以设置为 src 属性值的URL。然后,在加载图像时,我们调用 revokeObjectURL 清除用于创建URL的资源。
使用object URLs 显示PDF
我们还可以使用object URL来显示PDF。我们使用相同的 crateObjectURL 方法,但将其设置为 iframe 的URL而不是img元素。
例如,我们可以编写以下HTML:
<input type="file" > <iframe>
然后,我们可以将 src 属性设置为PDF对象URL的iframe,如下所示:
const fileInput = document.querySelector('input'); const iframe = document.querySelector('iframe'); fileInput.onchange = () => { const file = fileInput.files[0]; const objUrl = URL.createObjectURL(file); iframe.setAttribute('src', objUrl); URL.revokeObjectURL(objUrl); }
我们使用 createObjectURL 和上传的PDF文件来创建Object URL字符串。然后我们可以为其设置 src 属性。然后,PDF将显示在Firefox的iframe中。
将 object URLs 与其他文件类型一起使用
Object URL也可以与其他文件类型一起使用。例如,我们可以选择一个视频文件并通过编写以下代码来播放它。首先,我们编写以下HTML代码:
<input type='file' /> <video controls />
然后,要播放从文件输入中选择的视频文件,我们编写:
const fileInput = document.querySelector('input'); const video = document.querySelector('video'); fileInput.onchange = async () => { const file = fileInput.files[0]; const objUrl = URL.createObjectURL(file); video.src = objUrl; await video.play(); URL.revokeObjectURL(objUrl); }
在上面的代码中,我们有一个异步函数,该函数从选定的视频文件创建Object URL。然后,将Object URL设置为video元素的src属性。
然后,我们调用视频 play 以播放视频。 play 方法返回一个Promise,因此我们必须添加一个 await 等待该Promise的解决。
完成此操作后,我们可以在Object URL上调用 revokeObjectURL 以释放资源。
我们可以创建Object URL并将其设置为各种元素的src属性,以显示或播放它们。在大多数浏览器中,它都可以处理图像,音频和视频。
上述内容就是如何使用 JavaScript object URLs进行图像音频和视频的处理,你们学到知识或技能了吗?如果还想学到更多技能或者丰富自己的知识储备,欢迎关注行业资讯频道。