JavaScript序列化图像（图标）

我正在CrossRider中建立一个扩展。我需要在数据库中保存图像/图标，我有它们的url。它们是微小的图像，在数据库中不会成为问题。我可能有类似的东西可以访问

background.js

：

<img src="http://something.com/icon.ico" alt="icon">

我希望能够将该图像序列化到数据库（它是一个键/值数据库），然后反序列化并显示它。类似HTML5的

FileReader.readAsDataUrl（）

之类的东西会很好，但我不能使用这种方法，因为它似乎太依赖表单了

---

谢谢（[-|）。

一种解决方案可能是在画布上绘制图像，然后使用

.toDataURL（）

。有关示例，请参阅

您还可以通过AJAX获取二进制数据。较新的浏览器可以使用

XMLHttpRequest

来检索

ArrayBuffer

（基本上是一个字节数组）。有关这方面的更多信息，请参阅。如那篇文章所述，还可以通过设置

.OverrideMetType（'text\/plain；charset=x-user-defined'）来接收二进制数据

在AJAX请求上。后一种技术适用于较旧的浏览器和jQuery的AJAX功能。但是，任何类型的AJAX都需要使用相同的源策略（例如，通过创建后端web服务来获取/代理图像，并添加HTTP头

访问控制允许源：

）

二进制AJAX示例：

---

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);

---

开始了。

好吧，我考虑了两个选项，但没有一个适合，因为映像驻留在不同的域中。第一个解决方案因安全警告而失败，第二个解决方案因

同源策略而无法工作。

。还有什么想法吗？@MadeOfAir你能建立一个后端服务来获取/代理图标吗？如果你发送HTTP头

访问控制允许源代码：

通过响应，您可以绕过相同的源代码策略（）。如果这些是favicons，则存在一个现有的服务，可以完全执行此操作。好的，我正在接近。但我不知道像

$这样的请求会获得什么样的数据。获取("http://g.etfv.co/http://www.google.com“，函数（数据）…）；

。我尝试了几次转换，假设数据是二进制的，将其转换为十六进制字符串，然后使用

hexToBase64（）

specified，prepend”数据：image/x-icon；base64，"，但这不起作用。@MadeOfAir jQuery的AJAX函数无法为您提供

ArrayBuffer

。您要么需要使用本机

XMLHttpRequest

，要么可以使用文章中提到的字符集hack。我已经发布了一个展示每种技术的示例。我想我没有澄清自己。我需要显示该图标并保存它到数据库。我已经编辑了上面的问题。无论如何，您发布的方法允许我以字节的形式检索图标，我需要base64字符串，这样我就可以将其设置为

img.src

，对吗？。那么

blob

数据类型可能比

bytearray

更合适。