是否可以使用 FileReader 将网页上的 <image> 转换为 base64？

【问题标题】：Is it possible to turn an <img> on webpage to base64 using FileReader?是否可以使用 FileReader 将网页上的 <image> 转换为 base64？
【发布时间】：2012-11-26 08:57:55
【问题描述】：

我已经有了 var img = new Image(); img.src = src-url; 如何将其传递给 FileReader？ PS：我不使用canvas来获取base64，因为canvas同样支持gif格式。

【问题讨论】：

远程图像。有可能吗？
签出html5rocks.com/en/tutorials/file/xhr2。
“远程图像。有可能吗”。不，您必须使用服务器端代理。
@dfsq 如果图像在同一个域上或另一个域配置为支持 CORS。是的，可以使用最新的 API。

标签： javascript google-chrome google-chrome-extension filereader

【解决方案1】：

使用最新的APIs 的示例，与旧浏览器不兼容。

var xhr = new XMLHttpRequest();
xhr.open('GET', 'http://www.gravatar.com/avatar/40ca36f062050220082cd8c46b377ab4?s=32&d=identicon&r=PG', true);
xhr.responseType = 'blob';

xhr.onload = function(e) {
  var blob = new Blob([this.response], {type: 'image/png'});
  var reader = new FileReader();
  reader.onload = function() {
    console.log(reader.result)
  };
  reader.readAsDataURL(blob);
};

xhr.send();

【讨论】：

是的，你是对的。对于 chrome 扩展，它只允许 CORS。谢谢你的帮助。
@Tom 只需在清单文件中添加正确的权限，Chrome 就会很乐意为您发出跨域请求。以"permissions": ["http://www.gravatar.com/avatar/*"] 为例。