Javascript 如何获取浏览器的缓存图像？

我正在使用Angular.JS和ionic用JavaScript实现一个网页。页面生成器是具有标题字段的菜单项之一，用户可以在其中加载文件。使用[Save]按钮，结果被发送到关系数据库

页面生成器将整个生成的HTML对象保存在数据库中，如

<div class="hero-image" ivm-bg-axis="y" ivm-bg-drag="" ivm-bg-disabled="disabled" ng-style="imageOptions.style" ngf-background="ngModel" style="background-image: url(&quot;blob:null/3dfb1617-e1c8-45e8-9c0e-5f772129d2cb&quot;);"></div>

---

基于您的伪代码和我的注释，我将尝试在这里编译它，希望它能有所帮助

正如我所说，此代码必须在构建blob的同一窗口中执行。否则，将无法取回文件

function getBlobFromUrl (bUrl) {
  return new Promise((resolve, reject) => {
    let xhr = new XMLHttpRequest()
    xhr.responseType = 'blob'
    xhr.addEventListener('load', event => {
      if (xhr.status === 200) {
        resolve(xhr.response)
      } else {
        reject(new Error('Cannot retrieve blob'))
      }
    })

    xhr.open('GET', bUrl, true)
    xhr.send()
  })
}

function fromBlobToBase64 (blob) {
  return new Promise((resolve, reject) => {
    let reader = new FileReader()
    reader.addEventListener('loadend', event => {
      resolve(reader.result)
    })
    reader.readAsDataURL(blob)
  })
}

let blobUrl = 'blob:null/520cf0e0-fa19-438c-9db7-68af87f30f56'
getBlobFromUrl(blobUrl).then(fromBlobToBase64).then(result => {
  // result will contain file encoded in base64
})

基于这两个答案：

如果您想阅读更多内容，请访问相关文档的链接：

---

您可能会发现这个答案很方便。只需捕获所有blob url，获取base64 url并替换（必须在发送到数据库之前完成）。但这里的示例以getAsFile（）开始，根据DataTransferItem.getAsFile（）的Mozilla页面，如果对象不是文件，则它返回null。您认为blob:null对象是一个文件吗？我既没有“file”，也没有“img”标记。我在pseud代码中添加了我真正需要的东西。如何获得blob并不重要。您所需要的只是一个blob，然后您可以使用FileReader读取并存储该文件。

null

在blob路径中意味着它只是在本地主机源上创建的。根据以下回答：为什么要将其转换为b64字符串？这是一个示例，您可以将b64字符串内联到原始代码中。非常感谢您的详细回复！出于测试目的，是否可以在对话中显示图像？类似于

alert（url，'The image'）

？如果您使用

new image（）

创建了该图像，则可以将其附加到如下主体：

document.body.appendChild（image）

。这里的更多信息：试着按照这个答案。同样，如果你认为你的问题被回答或解决了，你可以把它标记为这样。