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

【问题标题】：Is there a way to get an url out of a chrome's storage image?有没有办法从 chrome 的存储图像中获取 url？
【发布时间】：2015-03-25 05:16:17
【问题描述】：

我正在构建一个 Chrome 应用程序，我从 XMLHTTPREQUEST 中获得了一个 .png 文件，该文件稍后使用 chrome.storage API 存储在本地，因此我可以稍后使用它，以防万一将使用该应用程序可以在没有连接到互联网的情况下访问它。问题是在 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>
});

谢谢你，如果我的英语听不懂，对不起。

【问题讨论】：

您可以使用画布对象将图像转换为base64字符串

标签： javascript css html google-chrome-app

【解决方案1】：

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

如果您需要将图像存储在 URL 可以引用的位置，您可以执行以下两种操作之一：

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

您可以从 Blob 中获取 URL，但它仅表示内存中对象的句柄，因此不要期望您可以保存该 URL 并永远使用它。应用关闭时内存会被回收，旧的 Blob URL 下次失效。
如果您希望它永久存储在某个地方，以便您可以保存 URL 并在将来使用它，那么您可以使用 File API 将其写入文件系统。

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

【讨论】：