将图像存储在离线存储中

Question

我正在为自己创建一个快速拨号扩展程序（我知道有很多快速拨号扩展程序，但大多数都会显示广告，我的杀毒软件将它们威胁为 PuP），我想保存网站的徽标图像,让用户自己放置一张图片,或者给图片的url

我对如何在 chrome 的离线存储 (https://developer.chrome.com/apps/offline_storage#table) 中保存图像感到困惑，没有保存其他文件类型的示例。

如何在 google chrome 的离线存储中保存图片？

Answer 1

我会将图像转换为数据 URL。那时它只是一个字符串，所以很容易保存。有关数据 URL 图片的示例，请参阅：https://en.wikipedia.org/wiki/Data_URI_scheme#Examples

我通常在命令行上使用 cat whatever.png | base64 将图像转换为数据 URLs，但如果您愿意，有许多网站可以为您完成此操作。

希望对您有所帮助。

自己创建图像（记得将 mime 类型更改为您需要的任何类型）： cat /apple/Downloads/80.png | printf "%s%s%s" '<img src="data:image/png;base64,' "$(base64 -w0)" '" alt="Red dot" />'

将为您创建数据 URL 的网站示例：

我制作了一个 fiddle 来展示如何使用文件 API 获取图像作为数据 URL: https://jsfiddle.net/quvvtkwr/

Answer 2

看看chrome.storage API:
- 5MB 数据限制或无限，如果扩展程序具有 unlimitedStorage 权限
- 内容脚本可以直接访问用户数据，不需要后台页面。
- 它是异步的，因此比阻塞和串行 localStorage 更快 API。
- 用户数据可以存储为对象（localStorage API 以字符串形式存储数据）。不过，仅支持简单的 JSON-可序列化对象。

localStorage 序列化所有内容，因此您必须先将图像转换为数据网址：

var xhr = new XMLHttpRequest();
xhr.open('GET', favicon_url);
xhr.responseType = 'arraybuffer';
xhr.onload = function(r) {
    if (xhr.status != 200) {
        return;
    }
    localStorage.icon = 'data:image/png;base64,' +
        btoa(String.fromCharCode.apply(null, new Uint8Array(xhr.response)));
}
xhr.send();

这是一个假设 png 图片类型的简化示例。

~~chrome.fileSystem API 可能是更好的选择。~~（不适用于扩展程序，因为它仅适用于应用程序）
HTML5 FileSystem API：目前可能是最好的选择，但 API 不再由 W3C 维护，因此不清楚它是否会保留在未来。

将图像存储在离线存储中

store images in offline storage

local-storage

google-chrome-extension