Question

我正在构建 Chrome应用，我从XMLHTTPREQUEST获取一个.png文件，该文件稍后使用chrome.storage API存储在localy中，以便我以后可以使用它即将使用该应用程序的人可以访问它而无需连接到互联网。问题是在html中你总是需要一个指定图像存储位置的URL，我已经尝试了所有内容，以便从存储在chrome存储中的.png文件中获取一个url但是没有任何作用。

我想要一种方法从存储的图像中获取一个在html img中使用的URL。

这是我获取.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可以引用它的位置，您可以执行以下两种操作之一：

如果您想将其保留在chrome.storage中，只需创建一个临时URL（关闭应用时会丢失），您可以将数据读入ArrayBuffer，并构建一个Blob它的对象。

您可以从Blob获取URL，但它只代表内存中对象的句柄，因此不要期望您可以保存该URL并永久使用它。应用程序关闭后将回收内存，旧的Blob URL下次无法生效。
如果您希望将其永久存储在某处，以便您可以保存URL并在将来使用它，那么您可以使用File API将其写入文件系统。

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

有没有办法从Chrome的存储图像中获取网址？

1 个答案: