将图片放入chrome.storage扩展名

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

有办法吗？ 在存储图像的方式上似乎几乎没有什么帮助，并且存在的是旧的，并讨论了针对较旧的存储API使用base64进行编码。 但是当我进行初步研究时，有人声称不再需要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将首先序列化数据，以保存图像，您可以：

1. 保存图像src。 chrome.storage.sync.set({ src: img.src });
2. 保存图像dataURL 。