js圖片 視頻預覽 URL createObjectURL()

不少業務場景須要搞定圖片/視頻上傳，同時又要求可以快速預覽效果，避免圖片或視頻稍大或請求響應較慢，使用createObjectURL()本地預覽實用性更加。

1、什麼是URL.createObjectURL()

URL.createObjectURL() 靜態方法會建立一個 DOMString，其中包含一個表示參數中給出的對象的URL。這個 URL 的生命週期和建立它的窗口中的 document 綁定。這個新的URL 對象表示指定的 File 對象或 Blob 對象。

來源: MDN

簡單的理解一下就是將一個file或Blob類型的對象轉爲UTF-16的字符串，並保存在當前操做的document下。

擴展1： UTF-8與UTF-16與GBK到底有啥區別， 都是 可變長度的編碼方式 經過對Unicode碼值進行對應規則轉換後，編碼保持到內存/文件中

細提及來就是另外一個故事了，不要在乎細節。

2、URL.createObjectURL()有什麼用

固然是本篇主題的預覽功能了。

等等。預覽用FileReader.readAsDataURL(file)轉base64搞定啊。

好的，下一話題。

3、URL.createObjectURL()與FileReader.readAsDataURL()

若是你會用FileReader.readAsDataURL(file)方法，那能夠往下讀類比一下二者優劣。

1. 返回值

   • FileReader.readAsDataURL(file)能夠獲得一段base64的字符串。
   • URL.createObjectURL(file)能夠獲得當前文件的一個內存URL。

2. 內存使用

   • FileReader.readAsDataURL(file)的返回值是轉化後的超長base64字符串(長度與要解析的文件大小正相關)。
   • URL.createObjectURL(file)的返回值雖然是字符串，可是是一個url地址。

3. 內存清理

   • FileReader.readAsDataURL(file)依照JS垃圾回收機制自動從內存中清理。
   • URL.createObjectURL(file)存在於當前doucment內，清除方式只有unload()事件或revokeObjectURL()手動清除 。

4. 執行機制

   • FileReader.readAsDataURL(file)經過回調的形式返回，異步執行。
   • URL.createObjectURL(file)直接返回，同步執行。

5. 兼容性

   • 兼容性兼容IE10以上，其餘瀏覽器均支持。

6. 其餘

   • FileReader.readAsDataURL(file)當多個文件同時處理時，須要每個文件對應一個新的FileReader對象。

     

   • URL.createObjectURL(file)依次返回無影響。

---

整體來講

URL.createObjectURL(file)獲得本地內存容器的URL地址，方便預覽，屢次使用須要注意手動釋放內存的問題，性能優秀。 FileReader.readAsDataURL(file)勝在直接轉爲base64格式，能夠直接用於業務，無需二次轉換格式。

關於使用canvas截取視頻第一幀的問題，下篇再來。

---

附1：Base64 to Blob

function dataURLtoBlob(dataurl) {
    var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1],
        bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
    while (n--) {
        u8arr[n] = bstr.charCodeAt(n);
    }
    return new Blob([u8arr], { type: mime });
}
複製代碼