chrome extension 如何保存图片到本地

Question

我想做一个类似于speed dial的chrome extension 。也就是打开新标签后是我自己的页面，可以收藏一些我常去的网站，并且都有网站的缩略图。我想问的就是这些缩略图如何保存到本地。不至于每次打开页面的时候都去重新加载新的图片。

Answer 1

Chrome extension 提供了 storage 接口，可以将数据存储于本地或存储于服务器上。

参考资料: http://developer.chrome.com/extensions/storage.html#overview

另外，关于图片，你可以将其转换成 DataURI 之后，使用存储接口存于本地。

// 将图片变成 DataURI
var img = new Image();
img.onload = function() {
  var canvas = document.createElement('canvas');
  canvas.width = img.width;
  canvas.height = img.height;
  var ctx = canvas.getContext('2d');
  ctx.drawImage(imageObj);

  // 这里就是你要的 DataURI
  var DataURI = canvas.toDataURL();
  // 保存下来
  chrome.storage.local.set({image : DataURI});
}
img.src = 'http://xxxx'; // 这里写你的图片 url