javascript - 如何获取浏览器的缓存图片？

Question

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

页面生成器像这样将整个生成的 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>

图像用 *style="background-image: url("blob:null/3dfb1617-e1c8-45e8-9c0e-5f772129d2cb"); *. 这可能是缓存的浏览器对象的唯一键，是吗？如果是这样，我想将此图像保存为 BLOB 对象，例如，在同一数据库记录的另一个字段中。

问题: 如何从浏览器中取出这张图片？在不同的浏览器之间获取这些信息有什么不同吗？

感谢您的回复!

编辑:我需要的伪代码是这样的:

var cache = new BrowserCache();

var imageURL= cache.querySelector('url["blob:null/520cf0e0-fa19-438c-9db7-68af87f30f56"]');

var image = cache.getElement(imageURL);

// Convert image to appropriate format, if necessary
// Add image information to record to be sent to the server

Answer 1

根据你的伪代码和我的评论，我会尝试在这里编译它，希望它能有所帮助。

正如我所说，这段代码必须在构建 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
})

基于这两个答案:

• > How to get a file or blob from an object URL?
• > Convert blob to base64

如果您想阅读更多内容，可以链接到相关文档:

• > https://developer.mozilla.org/pl/docs/Web/API/Blob
• > https://developer.mozilla.org/en-US/docs/Web/API/FileReader