资讯

精准传达 • 有效沟通

从品牌网站建设到网络营销策划,从策略到执行的一站式服务

如何使用JavaScriptobjectURLs进行图像音频和视频的处理

本篇文章为大家展示了如何使用 JavaScript object URLs进行图像音频和视频的处理,内容简明扼要并且容易理解,绝对能使你眼前一亮,通过这篇文章的详细介绍希望你能有所收获。

我们提供的服务有:成都网站制作、成都网站建设、微信公众号开发、网站优化、网站认证、果洛州ssl等。为成百上千家企事业单位解决了网站和推广的问题。提供周到的售前咨询和贴心的售后服务,是有科学管理、有技术的果洛州网站制作公司

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

使用object URLs

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

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

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

URL.revokeObjectURL(objectURL);

使用object URLs 显示图片

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

首先,我们编写以下HTML:

 

然后,我们可以编写以下代码来侦听文件输入的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: