Question

我正在为自己创建一个快速拨号扩展（我知道有很多快速拨号扩展，但大多数都会显示广告，我的防病毒威胁他们作为PuP），我想保存网站的徽标图像，让我们用户可以自己放置一张图片，也可以给出图片的网址。

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

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

Answer 1

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

localStorage序列化所有内容，因此您必须先将图片转换为dataurl：

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：目前可能是最佳选择，但W3C不再维护API，因此不清楚它是否会保留在未来。

Answer 2

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

我通常会使用cat whatever.png | base64在命令行上将图片转换为数据网址，但如果您愿意，有很多网站会为您执行此操作。

希望有所帮助。

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

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

我已经做了一个小提示，展示了如何使用文件API将图像作为数据网址：https://jsfiddle.net/quvvtkwr/

将图像存储在离线存储中

2 个答案: