Question

我正在CrossRider中构建扩展。我需要在数据库中保存我有自己网址的图像/图标。它们是微小的图像，并且不会成为数据库中的问题。 background.js：

可能会有这样的内容

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

我希望能够将该图像序列化到数据库（它是一个键/值数据库）并在以后反序列化并显示它。像HTML5 FileReader.readAsDataUrl()这样的东西会很好，但是我不能使用那种方法，因为它似乎与表格太紧密了。

谢谢（[ - |）。

Answer 1

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上的。

Answer 2

一种解决方案可能是在画布上绘制图像，然后使用.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/

JavaScript序列化图像（图标）

2 个答案: