将图像存储在离线存储中

Question

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

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

如何将图片保存在谷歌浏览器的离线存储中？

Answer 1

我会将图像转换为数据 URL。那时它只是一个字符串，因此很容易保存。数据 URL 图片示例见：https://en.wikipedia.org/wiki/Data_URI_scheme#Examples

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

希望对您有所帮助。

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

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

• http://www.base64-image.de/step-1.php
• http://dataurl.net/#dataurlmaker

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

Answer 2

• 看看chrome.storage API：

  • 如果扩展程序具有unlimitedStorage 权限，则为 5MB 数据限制或无限
  • 内容脚本无需后台页面即可直接访问用户数据。
  • 它是异步的，因此比阻塞和串行的 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：目前可能是最好的选择，但该 API 不再由 W3C 维护，因此尚不清楚它是否会保留在未来。