Question

我目前正在编写Chrome扩展程序，需要将一些图像保存到chrome.storage内存中。我正在制作一系列对象：

var AnImage = new Image()
AnImage.src = http://image.image/imageurl.png
var ObjectToSave = {   ...,
    graph_img : AnImage,
     ... }
...
AnArray[x] = ObjectToSave

我输出一个简单的附加

document.getElementById("AnElement").appendChild(ObjectToSave.graph_img)

但是当我从存储中加载它并尝试再次附加它时，它会返回错误

Error in response to storage.get: TypeError: Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'.

当我通过console.log（）输出它时，它会评估作为对象检索的内容，但不是我能识别的任何内容。我目前正在使用chrome.storage.sync

有没有办法做到这一点？对于存储图像的方式似乎没什么帮助，存在的问题似乎很旧，并讨论了使用base64为旧存储API进行编码。但是，当我进行初步研究时，有人声称不再需要base64编码

Answer 1

经过更多的研究，我发现了FileReader对象，它提供了一种比使用canvas方法更优雅的方法。因为这是铬特定的兼容性得到保证。

function ImageLoader( url ){
    var imgxhr = new XMLHttpRequest();
        imgxhr.open( "GET", url + "?" + new Date().getTime() );
        imgxhr.responseType = "blob";
        imgxhr.onload = function (){
            if ( imgxhr.status===200 ){
                reader.readAsDataURL(imgxhr.response);
            }
        };
    var reader = new FileReader();
        reader.onloadend = function () {
            document.getElementById( "image" ).src = reader.result;
            chrome.storage.local.set( { Image : reader.result } );
        };
    imgxhr.send();
}

需要使用chrome.storage.local，因为很可能会超出chrome.storage.sync的存储空间限制。

Answer 2

正如Marc Guiselin和wOxxOm在评论中提到的，chrome.storage将首先序列化数据，以保存图像，您可以：

保存图片src。 chrome.storage.sync.set({ src: img.src });
Save the image dataURL。

将图像放入chrome.storage扩展名

2 个答案: