将图像放入 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)

但是当我从存储中加载它并尝试再次附加它时，returns 出现错误

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

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

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

Answer 2

仔细查看之后，我发现了 FileReader 对象，它提供了一种比使用 canvas 方法更优雅的方法。因为这是 chrome 特定的兼容性得到保证。

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 的存储大小限制。

将图像放入 chrome.storage 扩展

putting an image into chrome.storage extension

javascript

image

google-chrome-extension

google-chrome-storage

chrome-sync