我正在使用 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("blob:null/3dfb1617-e1c8-45e8-9c0e-5f772129d2cb");"></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最佳答案
根据你的伪代码和我的评论，我会尝试在这里编译它，希望它能有所帮助。
正如我所说，这段代码必须在构建 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
})
基于这两个答案:
如果您想阅读更多内容，可以链接到相关文档:
关于javascript - 如何获取浏览器的缓存图片？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46220352/