一、从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/n/247929.html
微信扫一扫 
支付宝扫一扫 