BlobUrl全面详解

发布时间：2023-05-19

一、从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转换为嵌入式可靠的<object>元素。

// 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)
}
  1. 使用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)
}
推荐文章