我正在 CrossRider 中构建一个扩展。我需要将图像/图标（我有它们的 url）保存在数据库中。它们是微小的图像，不会成为数据库中的问题。我可能有类似的东西可供background.js：
<img src="http://something.com/icon.ico" alt="icon">
我希望能够将该图像序列化到数据库（它是一个键/值数据库），然后再反序列化并显示它。像 HTML5 的 FileReader.readAsDataUrl() 这样的东西会很好，但我不能使用那种方法，因为它似乎太依赖于表单。
谢谢 ([-|)。
【问题讨论】：
标签： javascript crossrider
Base64 转换来显示图像似乎不是必需的：
var xhr = new XMLHttpRequest();
xhr.open('GET', 'http://g.etfv.co/http://www.google.com', true);
xhr.responseType = 'blob';
xhr.onload = function (e) {
var icon_blob = xhr.response; //That can be saved to db
var fr = new FileReader();
fr.onload = function(e) {
document.getElementById('myicon').src = fr.result; //Display saved icon
};
fr.readAsDataURL(icon_blob);
};
xhr.send(null);
这是JSFiddle。
【讨论】：
一种解决方案可能是在画布上绘制图像，然后使用.toDataURL()。示例见How to get image bytes string (base64) in html5, jquery, javascript?。
您还可以通过 AJAX 获取二进制数据。较新的浏览器可以使用XMLHttpRequest 来检索ArrayBuffer（本质上是一个字节数组）。有关更多信息，请参阅MDN: Sending and Receiving Binary Data。如那篇文章所述，也可以通过在 AJAX 请求上设置 .overrideMimeType('text\/plain; charset=x-user-defined') 来接收二进制数据。后一种技术适用于较旧的浏览器和 jQuery 的 AJAX 函数。但是，任何类型的 AJAX 都需要您绕过同源策略（例如，通过创建一个后端 Web 服务来获取/代理图像并添加 HTTP 标头Access-Control-Allow-Origin: *）。
二进制 AJAX 示例：http://jsfiddle.net/te7L4/
【讨论】：
same origin policy 而无法工作。请问还有什么想法吗？
Access-Control-Allow-Origin: * 与响应一起发送，您可以绕过同源策略 (Cross-Origin Resource Sharing)。如果这些是网站图标，g.etfv.co 的现有服务正是这样做的。
$.get("http://g.etfv.co/http://www.google.com", function(data)...); 这样的请求会得到什么样的数据。我尝试了几种转换，假设数据是二进制的，将其转换为十六进制字符串，然后使用hexToBase64() 指定here，前置“data:image/x-icon;base64”，但这不起作用。跨度>
ArrayBuffer。你要么需要使用原生的XMLHttpRequest，要么可以使用文章中提到的charset hack。我已经发布了一个展示每种技术的示例。
img.src，对吗？那么也许blob 数据类型比bytearray 更合适。