如何使用 JavaScript object URLs進(jìn)行圖像音頻和視頻的處理

本篇文章為大家展示了如何使用 JavaScript object URLs進(jìn)行圖像音頻和視頻的處理，內(nèi)容簡(jiǎn)明扼要并且容易理解，絕對(duì)能使你眼前一亮，通過(guò)這篇文章的詳細(xì)介紹希望你能有所收獲。

許多Web應(yīng)用程序需要在前端處理文件輸入，或者將文件上傳到后端。

使用object URLs

我們可以調(diào)用 URL.createObjectURL 來(lái)從文件對(duì)象中創(chuàng)建一個(gè)URL字符串對(duì)象，方法如下。

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

然后，我們可以在URL字符串對(duì)象上調(diào)用 revokeURL 以從內(nèi)存中釋放URL資源：

URL.revokeObjectURL(objectURL);

使用object URLs 顯示圖片

例如，我們可以使用 createObjectURL 方法在 img 元素中顯示選定的圖像文件，如下所示。

首先，我們編寫以下HTML：

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

然后，我們可以編寫以下代碼來(lái)偵聽(tīng)文件輸入的change事件，然后使用 createObjectURL 設(shè)置 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);   } }

在上面的代碼中，我們?cè)谶x定的文件對(duì)象 file 上調(diào)用了 createObjectURL 來(lái)創(chuàng)建可以設(shè)置為 src  屬性值的URL。然后，在加載圖像時(shí)，我們調(diào)用 revokeObjectURL 清除用于創(chuàng)建URL的資源。

使用object URLs 顯示PDF

我們還可以使用object URL來(lái)顯示PDF。我們使用相同的 crateObjectURL 方法，但將其設(shè)置為 iframe  的URL而不是img元素。

例如，我們可以編寫以下HTML：

<input type="file" > <iframe>

然后，我們可以將 src 屬性設(shè)置為PDF對(duì)象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文件來(lái)創(chuàng)建Object URL字符串。然后我們可以為其設(shè)置 src  屬性。然后，PDF將顯示在Firefox的iframe中。

將 object URLs 與其他文件類型一起使用

Object URL也可以與其他文件類型一起使用。例如，我們可以選擇一個(gè)視頻文件并通過(guò)編寫以下代碼來(lái)播放它。首先，我們編寫以下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); }

在上面的代碼中，我們有一個(gè)異步函數(shù)，該函數(shù)從選定的視頻文件創(chuàng)建Object URL。然后，將Object URL設(shè)置為video元素的src屬性。

然后，我們調(diào)用視頻 play 以播放視頻。 play 方法返回一個(gè)Promise，因此我們必須添加一個(gè) await 等待該P(yáng)romise的解決。

完成此操作后，我們可以在Object URL上調(diào)用 revokeObjectURL 以釋放資源。

我們可以創(chuàng)建Object URL并將其設(shè)置為各種元素的src屬性，以顯示或播放它們。在大多數(shù)瀏覽器中，它都可以處理圖像，音頻和視頻。

上述內(nèi)容就是如何使用 JavaScript object URLs進(jìn)行圖像音頻和視頻的處理，你們學(xué)到知識(shí)或技能了嗎？如果還想學(xué)到更多技能或者豐富自己的知識(shí)儲(chǔ)備，歡迎關(guān)注億速云行業(yè)資訊頻道。