如何获取浏览器的缓存图片？答案

【问题标题】：How to get the cached image of the browser?如何获取浏览器的缓存图片？
【发布时间】：2018-02-23 12:16:43
【问题描述】：

我正在使用 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

【问题讨论】：

stackoverflow.com/questions/18650168/convert-blob-to-base64 您可能会发现这个答案很方便。只需捕获所有blob url，获取base64 url并替换（必须在发送到数据库之前完成）。
但是那里的示例以 getAsFile() 开头，根据 DataTransferItem.getAsFile() 的 Mozilla 页面，如果对象不是文件，则返回 null。你认为 blob:null 对象是一个文件吗？我既没有“文件”，也没有“img”标签。
我在伪代码中添加了我真正需要的内容。
如何获得 blob 并不重要。您只需要一个 blob，然后您就可以使用 FileReader 读取它并存储文件。
null in blob path 仅表示它已根据此答案在本地主机源上创建：stackoverflow.com/questions/28377733/…

标签： javascript angularjs image ionic-framework

【解决方案1】：

根据您的伪代码和我的 cmets，我将尝试在此处编译它，希望对您有所帮助。

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

基于这两个答案：

如果你想阅读更多，有相关文档的链接：

【讨论】：

为什么要转换成b64字符串？
这是一个例子，你可以将b64字符串内联到原始代码中。
非常感谢您的详细回复！是否可以在对话中显示图像以进行测试？ alert(url, 'The image') 之类的东西？
如果您使用new Image() 创建了图像，您可以将其附加到一个像这样的主体：document.body.appendChild(image)。更多信息：developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/Image
stackoverflow.com/questions/27798126/… 尝试遵循这个答案。此外，如果您认为您的问题已回答/解决，您可以将其标记为这样。