Question

我正在使用Angular.JS＆amp ;;在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>

其中图像用* style =＆＃34; background-image：url（＆＃34; blob：null / 3dfb1617-e1c8-45e8-9c0e-5f772129d2cb <表示/强>＆＃34）; *。这可能是缓存浏览器对象的唯一键，是吗？如果是这样，我想将此图像保存为 BLOB 对象，例如，在同一数据库记录的另一个字段中。

问题： 如何才能将此图片从浏览器中删除？在不同浏览器之间获取此信息有区别吗？

感谢您的回复！

编辑：我在伪代码中需要的是：

＆＃13;
＆＃13;
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
＆＃13;
＆＃13;
＆＃13;

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
})

基于这两个答案：

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

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

1 个答案: