javascript - 有没有办法从 chrome 的存储图像中获取 url？

Question

我正在构建一个 Chrome 应用程序，我从 XMLHTTPREQUEST 获得一个 .png 文件，该文件稍后使用 chrome.storage API 存储在本地，这样我可以稍后使用它以防有人将要使用该应用程序可以在没有连接到互联网的情况下访问它。问题是，在 html 中，您总是需要一个 url 来指定图像的存储位置，我已经尝试了所有方法来从存储在 chrome 存储中的 .png 文件中获取一个 url，但没有任何效果。

我正在寻求一种方法来从存储的图像中获取一个 url 以在 html img 中使用。

这是我获取 .png 文件并将其存储在 chrome 存储器中的代码。

var xhr = new XMLHttpRequest();
xhr.open('GET', 'http://siteurl.com/image.png', true);
xhr.responseType = 'image/png';
xhr.onload = function(e) {
    chrome.storage.local.set({'iconImage':this.response}, function() {
        console.log('Image Saved');
    });
};
xhr.send();

这是从存储中获取图像的代码。

chrome.storage.local.get(function(image){
    var img = image.iconImage;

    //here is where I need to create the url so I can use it to 
      display the image in a <img>
});

谢谢你，如果我的英语无法理解，请原谅我。

Answer 1

chrome.storage.local 只是一个键值存储。它不提供任何使用 URL 访问值的方法。

如果您需要将图像存储在 URL 可以引用它的地方，您可以执行以下两种操作之一:

1. 如果你想把它保存在chrome.storage中，并且只是做一个临时的URL(当你关闭应用程序时它会丢失)，你可以将数据读入一个ArrayBuffer , 并从中构造一个 Blob 对象。

   您可以从 Blob 中获取 URL，但它只是代表内存中对象的句柄，因此不要指望您可以保存该 URL 并永远使用它。应用关闭时内存将被回收，旧的 Blob URL 将在下次失效。

2. 如果您希望它永久存储在某个地方，以便您可以保存 URL 并在将来使用它，那么您可以使用文件 API 将它写入文件系统。

   文件对象有一个 .toURL 方法，可以返回一个可用的 URL。该 URL 将指向一个实际文件，即使在您重新启动应用程序后它仍然有效(直到您选择删除该文件。)