一、從blobUrl轉回file
BlobUrl是一種JavaScript對象URL，可以直接鏈接到Blob或File對象。它們通常用於將文件的二進制數據呈現到用戶，例如將圖像顯示在DOM中。但是，有時需要將blobUrl轉回file。這也很簡單：只需使用XMLHttpRequest或fetch API來下載Blob，然後將其重命名為所需的文件擴展名即可。
// blobUrl轉回file的代碼示例
const downloadBlob = async (blobUrl, fileName) => {
const response = await fetch(blobUrl)
const blob = await response.blob()
const downloadLink = document.createElement('a')
downloadLink.href = window.URL.createObjectURL(new Blob([blob]))
downloadLink.download = fileName
document.body.appendChild(downloadLink)
downloadLink.click()
document.body.removeChild(downloadLink)
}
二、BlobUrl PDFH5打不開
BlobUrl可以方便地將PDF文件呈現在HTML5上，但有時會因為瀏覽器對文件類型的限制導致無法打開PDF。在這種情況下，可以使用PDFObject（一個專門用於呈現PDF文檔的JavaScript庫）將BlobUrl轉換為嵌入式可靠的
// BlobUrl PDFH5打不開的代碼示例 PDFObject.embed(blobUrl, "#pdf-container") // #pdf-container為存放PDF文檔的HTML容器
三、其他相關實用功能
除了上述用途之外，BlobUrl還可以用於許多其他實用功能，例如：
1、將BlobUrl轉換為Data URL並壓縮圖像數據以加快加載速度：
// BlobUrl轉換為Data Url並壓縮圖像數據的代碼示例
const compressImageBlobUrl = async (blobUrl) => {
const response = await fetch(blobUrl)
const blob = await response.blob()
const fileReader = new FileReader()
fileReader.onloadend = () => {
const image = new Image()
image.src = fileReader.result
const canvas = document.createElement('canvas')
const context = canvas.getContext('2d')
canvas.width = image.width / 2
canvas.height = image.height / 2
context.drawImage(image, 0, 0, canvas.width, canvas.height)
const compressedBlob = canvas.toBlob()
const compressedBlobUrl = URL.createObjectURL(compressedBlob)
return compressedBlobUrl
}
fileReader.readAsDataURL(blob)
}
2、使用BlobUrl將音視頻文件暫存到用戶的瀏覽器緩存中：
// 使用BlobUrl將音視頻文件暫存到緩存中的代碼示例
const cacheAudioVideo = async (blobUrl, cacheName) => {
const response = await fetch(blobUrl)
const blob = await response.blob()
const cache = await caches.open(cacheName)
const response = new Response(blob)
cache.put(blobUrl, response)
}
原創文章，作者：小藍，如若轉載，請註明出處：https://www.506064.com/zh-hant/n/247929.html
微信掃一掃 
支付寶掃一掃 